We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

?

<Router basename={props.path}><div><Links /><Route exact path="/" render={() => <h1>Home</h1>} /><Route path="/about" render={() => <h1>About</h1>} /><Route path="/contact" render={() => <h1>Contact</h1>} /><Route path="/:itemid"render={({match}) => <h1>Item: {match.params.itemid}</h1>} /></div></Router>

Consider this part of code, we want nav to '/about' path, it will show both about page and itemid page, because it consider /about is part of '/:itemid', to solve this problem, we can introduce 'Switch', it will render first match Route.

?

// https://jsbin.com/qijilugimport React from 'react'; import {BrowserRouter as Router,Route,Link,Switch } from 'react-router-dom';const Links = () =><nav><Link to="/">Home</Link><Link to="/about">About</Link><Link to="/contact">Contact</Link></nav>const App = (props) => (<Router basename={props.path}><div><Links /><Switch><Route exact path="/" render={() => <h1>Home</h1>} /><Route path="/about" render={() => <h1>About</h1>} /><Route path="/contact" render={() => <h1>Contact</h1>} /><Route path="/:itemid"render={({match}) => <h1>Item: {match.params.itemid}</h1>} /></Switch></div></Router> )export default App

?

轉載于:https://www.cnblogs.com/Answer1215/p/6596330.html

總結

以上是生活随笔為你收集整理的[React Router v4] Conditionally Render a Route with the Switch Component的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。