0

I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered but when I reload it at that specific url then it renders the content whereas I want it to be rendered as soon as I click on the link

this is my App.js

import React from 'react';

import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'

function App() {
  return (
    <>
    <Router>
      <Nav/>
      <Switch>
      <Route exact path='/about' render={About} />
      </Switch>
    </Router>
    </>
  );
}

export default App;

This is my Nav.js

import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom"; 
import './App.css';

function Nav(){
    return(
        <Router>
        <nav>
            logo
                <Link to="/about">
                About
                </Link>
                <Link to='/shop'>
                shop
                </Link>
        </nav>
        </Router>
    )
}

export default Nav

this is my About.js

import React from "react";

function About(){
    return(
        <div>
            About Page
        </div>
    )
} 
export default About
Dev Gaur
  • 1

1 Answers1

0

You should either wrap the App component with BrowserRouter or, wrap the App component with Router component that accepts a history prop.

Index.js

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>,document.getElementById("root"));

App.js

import React from 'react';

import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'

function App() {
  return (
    <>
    
      <Nav/>
      <Switch>
      <Route exact path='/about'>
        <About/>
      </Route>
      </Switch>
    </>
  );
}

export default App;

Nav.js

import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom"; 
import './App.css';

function Nav(){
    return(
        
        <nav>
            logo
                <Link to="/about">
                About
                </Link>
                <Link to='/shop'>
                shop
                </Link>
        </nav>
        
    )
}

export default Nav

Since, Nav.js and other components using Routes are wrapped within the app component which is further wrapped within BrowserRouter in index.js, you don't need to include Router in each component having Route or Link components.

Prajwal Kulkarni
  • 1,480
  • 13
  • 22