[React Router v4] Conditionally Render a Route with the Switch Component

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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。