使用 React Router 进行条件渲染 [英] Conditional rendering with React Router
问题描述
我想渲染一些顶部带有导航的路由,而渲染其他路由(如注册/登录页面)而没有任何导航.
对于导航的设置,我有:
const App = () =>(<路由器><div><导航/><div><路由精确路径="/" component={Home}/><Route path="/account" component={Account}/><Route path="/news" component={News}/>
<页脚/>
</路由器>);
我正在尝试使用 React Router 找到处理此问题的最佳方法(似乎它必须使用某种类型的条件来处理?-如果我当前的路由与这些路由中的任何一个匹配,则像这样渲染否则呈现这个.").
谢谢!
你至少有两种可能:
- 使用
Route
"path" 属性来测试路由并渲染组件.Path 属性接受path.to.regexp
表达式. - 使用
withRouter
方法包装您的组件,然后Nav
测试路由是否匹配,否则渲染null
.
第一个答案:
const App = () =>(<路由器><div><Route path="/(?!signin|signup)" component={Nav}/><div><路由精确路径="/" component={Home}/><Route path="/account" component={Account}/><Route path="/news" component={News}/>
<页脚/>