I am trying to add Routing in a React.js website but not its not working

Question

I am trying to add routing in a react js website but when i click on the link, however the URL changes but it does not renders the compn.net unless i refresh the page with the same url for example if the URL is localhost:3000/trending then i have to refresh the page.

Here is my Code

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <nav className="white">
            <div className="nav-wrapper">
                <img href="#" alt="logo" src="https://seeklogo.com/images/B-logo-EAD8D3-seeklogo.com.png" class="logo-small brand-logo center"/>
                <Router>
                   <ul id="nav-mobile" className="left hide-on-med-and-down">
                      <li><Link to="/">Home</Link></li>
                      <li><Link to="/Resturants">Resturants</Link></li>
                      <li><Link to="/offerspage">Offers</Link></li>
                      <li><Link to="/Trendingpage">Trending</Link></li>
                      <li><Link to="/more">More</Link></li>
                   </ul>
                   <ul className="right hide-on-med-and-down">
                       <li><button className="nav-btn">Sign Up</button></li>
                       <li>
                          <button id="cart-btn" className="nav-btn">
                          $0.00 <img alt="bag" className="bag" src="data:image/png;/>
                       </li>
                   </ul>
                </Router>
            </div>
            <div class="lower-div left">
               How would you like to receive this order? <span>Change</span>
            </div>
        </nav> 
     </header>
     
     <Router>
       <Switch>         
           <Route path="/Trendingpage" component={Trendingpage}/>
           <Route path="/" component={Home}/>
       </Switch>
     </Router>
    </div>
  );
}

export default App;

Answer 1

You need to add the exact prop to your Home Route, otherwise the page continues to render the index even with a different URL as it sees it as 'similar'.

<Router>
  <Switch>         
      <Route path="/Trendingpage" component={Trendingpage}/>
      <Route exact path="/" component={Home}/>
      
    </Switch>
  </Router>

Answer 2

You have used two Routers. use only one Router. For example see this https://codesandbox.io/s/affectionate-mcclintock-f1bvt?file=/src/App.js

 export default function App() { return ( <div className="App"> <Router> <header className="App-header"> <nav className="white"> <div className="nav-wrapper"> <ul id="nav-mobile" className="left hide-on-med-and-down"> <li><Link to="/">Home</Link></li> <li><Link to="/Resturants">Resturants</Link></li> <li><Link to="/offerspage">Offers</Link></li> <li><Link to="/Trendingpage">Trending</Link></li> <li><Link to="/more">More</Link></li> </ul> <ul className="right hide-on-med-and-down"> <li><button className="nav-btn">Sign Up</button></li> <li><button id="cart-btn" className="nav-btn"> $0.00 <img alt="bag" className="bag" src="data:image/png;/> </ul> </div> <div class="lower-div left"> How would you like to receive this order? <span>Change</span> </div> </nav> </header> <Switch> <Route path="/Trendingpage" component={Trendingpage}/> <Route path="/" component={Home}/> </Switch> </Router> </div> ); }