使用React路由器进行条件渲染
使用React路由器进行条件渲染
提问于 2017-10-20 11:47:44
我想在顶部使用nav呈现一些路由，而在不使用任何nav的情况下呈现其他路由(如注册/登录页面)。
对于nav的设置，我有：
const App = () => (
<Router>
<div>
<Nav />
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);我正在尝试找到使用React Router处理这个问题的最佳方法(似乎必须使用某种类型的条件可能？-“如果我当前的路由与这些路由中的任何一个匹配，那么就像这样渲染这个。”)。
谢谢!
回答 4
Stack Overflow用户
发布于 2017-10-20 16:49:02
您至少有两种可能性：
- 使用
Route"path“属性来测试路由并呈现组件。Path属性接受使用withRouter方法测试您的组件，如果路由匹配，则在Nav内部测试，否则呈现null。
第一个答案：
const App = () => (
<Router>
<div>
<Route path="/(?!signin|signup)" component={Nav}/>
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);第二个答案：
import { withRouter } from 'react-router'
const NavWithRouter = withRouter(Nav);
const App = () => (
<Router>
<div>
<NavWithRouter/>
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);Stack Overflow用户
发布于 2018-06-21 19:42:19
<Route path={`foo/(A|B|C)`} component={() => (<Baz {...props}/>)} />
其中，A,B,C是与foo/A类似的不同路由。
Stack Overflow用户
发布于 2019-01-05 20:30:56
我通常使用两个不同的布局页面。在布局页面中，有一个内容路由器。
我的代码将如下所示：
<Router>
<Route path="/login" component={AuthLayout} />
<Route path="/logout" component={AuthLayout} />
<Route path="/some/path" component={Layout} />
</Router>在每个布局中，将有通常的页眉/页脚/导航栏，然后是另一组路由。
<div className="auth-layout">
<header className="auth-layout__header"></header>
<main className="auth-layout__content">
<Switch>
<Route path="/login" component={Login} />
<Route path="/logout" component={Logout} />
</Switch>
</main>
</div>通过这种方式，我有了从需求到代码的直接映射。在我的代码中，两种布局之间的差异要大得多。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46842117
复制相关文章
相似问题
腾讯云开发者
