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>
)

当任何路线被击中时，侧边栏将被渲染以及相应的视图。但是，我正在尝试构建布局，以便对于某些路径（例如＆＃34; login＆＃34;），SideNav不会被渲染和组件（在这种情况下，{{ 1}}）是唯一被渲染的东西。换句话说，LoginView应该接管LoginView并成为最高div的唯一孩子。

无论如何这可以做到吗？

Answer 1

根据react-router docs：

path：string路径到regexp理解的任何有效URL路径。

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

路线数组：

说明哪些路线也会呈现SideNav（Working Example）：

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

<强>正则表达式：

另一个选项是仅在路径不包含某个字词working example）时显示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>
)

不要在特定路线

1 个答案: