[英]I am trying to add Routing in a React.js website but not its not working
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.我正在尝试在 React JS 网站中添加路由,但是当我单击链接时,URL 发生了变化,但它不会呈现 compn.net,除非我使用相同的 url 刷新页面,例如,如果 URL 是 localhost:3000 /trending 然后我必须刷新页面。
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;
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'.您需要将 exact 属性添加到您的 Home Route,否则页面会继续呈现索引,即使使用不同的 URL,因为它认为它“相似”。
<Router>
<Switch>
<Route path="/Trendingpage" component={Trendingpage}/>
<Route exact path="/" component={Home}/>
</Switch>
</Router>
You have used two Routers.您使用了两个路由器。 use only one Router.只使用一个路由器。 For example see this https://codesandbox.io/s/affectionate-mcclintock-f1bvt?file=/src/App.js例如看到这个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> ); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.