我正在嘗試在 React.js 網站中添加路由，但它不起作用

Question

我正在嘗試在 React JS 網站中添加路由，但是當我單擊鏈接時，URL 發生了變化，但它不會呈現 compn.net，除非我使用相同的 url 刷新頁面，例如，如果 URL 是 localhost:3000 /trending 然后我必須刷新頁面。

這是我的代碼

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

您需要將 exact 屬性添加到您的 Home Route，否則頁面會繼續呈現索引，即使使用不同的 URL，因為它認為它“相似”。

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

Answer 2

您使用了兩個路由器。 只使用一個路由器。 例如看到這個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> ); }