不要在特定路由上渲染组件

Question

我有一个基于 React 的 Web 应用程序，它利用 React Router 将页面映射到不同的 URL：

export const Container = () => (
    <div>
        <SideNav/>
        <div>
            <Switch>
                <Route path="/login" component={LoginView} />
                <Route path="/route1" component={RouteOne} />
                <Route path="/route2" component={RouteTwo} />
            </Switch>
        </div>
    </div>
)

当任何路线被击中时，侧边栏和适当的视图都会被渲染。但是，我正在尝试构建布局，以便对于某些路由（例如“登录”），SideNav不会呈现 并且组件（在这种情况下，LoginView）是唯一呈现的东西。换句话说，LoginView应该接管div并成为 top 的独生子div。

有没有办法做到这一点？

Answer 1

根据反应路由器文档：

path: string path-to-regexp 理解的任何有效 URL 路径。

path-to-regexp理解字符串、字符串数组或正则表达式。

路线数组：

说明哪些路由也将呈现SideNav（工作示例）：

  <Route path={['/route1', '/route2']} component={SideNav} />

正则表达式：

另一种选择是SideNav仅在路径不包含某个单词时才显示（工作示例）：

  <Route path={/^(?!.*login).*$/} component={SideNav} />

在你的代码中：

export const Container = () => (
    <div>
        <Route path={['/route1', '/route2']} component={SideNav} />
        <div>
            <Switch>
                <Route path="/login" component={LoginView} />
                <Route path="/route1" component={RouteOne} />
                <Route path="/route2" component={RouteTwo} />
            </Switch>
        </div>
    </div>
)