[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相关推荐

[React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a "dirty" state and we want t ...
hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
hitchhiker部署_《 Hitchhiker的React Router v4指南》：路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
react router v4 简介
最近使用react router 遇到一个问题:当对某个路由添加参数的时候/list/:app 这列路由,点击这个路由以后再点击其他路由,location地址就追加到后面,问不是replace. /l ...
React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react ...
React 16.x折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理,有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react(用起来感觉良好的状 ...
hitchhiker部署_Hitchhiker的React Router v4指南：20分钟内完成Grok React Router
hitchhiker部署 Hi fellow React Hitchhiker! Want a ride into React Router? Jump in. Let's go! 大家好,React ...

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

[React Router v4] Conditionally Render a Route with the Switch Component相关推荐

最新文章

热门文章