Я пытаюсь добавить маршрутизацию на веб-сайт React. js, но он не работает

Question

Я пытаюсь добавить маршрутизацию на веб-сайт response js, но когда я нажимаю на ссылку, однако URL-адрес изменяется, но он не отображает compn enet, если я не обновляю sh страницу с тем же URL-адресом например, если URL-адрес localhost: 3000 / trending, мне нужно обновить sh страницу.

Вот мой код

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

Вы использовали два маршрутизатора. используйте только один маршрутизатор. Например, см. Это 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>   ); }

Answer 2

Вам необходимо добавить точную опору к вашему домашнему маршруту, иначе страница продолжит отображать индекс даже с другим URL-адресом, поскольку он считает его «похожим».

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