CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-domreact-router-component
Dev Gaur
Dev Gaur

Reputation: 1

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

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

Upvotes: 0

Views: 28

Answers (1)

Prajwal Kulkarni
Prajwal Kulkarni

Reputation: 1705

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.

Upvotes: 0

Related Questions