使用 Fragment 时，重定向在 Switch 内不起作用

Question

版本"react-router": "5.0.1",测试用例<Switch>    <Route        component={TestComponent}        key={TestComponentPath}        path={TestComponentPath}        exact    />    {        exampleCondition && (            <>                 <Route                    component={TestComponent2}                    key={TestComponentPath2}                    path={TestComponentPath2}                    exact                 />                 <Route                    component={TestComponent3}                    key={TestComponentPath3}                    path={TestComponentPath3}                    exact                 />            </>        )    }    <Redirect to={redirectUrl} /></Switch>重现步骤显示示例Switch，Redirect用例。预期行为redirectUrl如果没有匹配的路径，应该重定向到给定的路径。实际行为Redirect在 switch 结束时提供了类似 no 的行为。问题大概是因为React.Fragment里面已经用过了Switch。删除后重定向工作正常。示例沙箱https://codesandbox.io/s/react-router-tklng

Answer 1

a 的所有子元素<Switch>都应该是<Route>或<Redirect>元素。只会呈现与当前位置匹配的第一个孩子。

https://reacttraining.com/react-router/web/api/Switch/children-node

因为您使用的是 Fragment，所以您正在添加不受支持的其他子项，Switch因此您的代码不会呈现。

您应该按如下方式切换代码，在不使用片段的情况下添加条件路由：

<Switch>

    <Route

        component={TestComponent}

        key={TestComponentPath}

        path={TestComponentPath}

        exact

    />

    { exampleCondition &&

                 <Route

                    component={TestComponent2}

                    key={TestComponentPath2}

                    path={TestComponentPath2}

                    exact

                 /> }

    { exampleCondition &&

                  <Route

                    component={TestComponent3}

                    key={TestComponentPath3}

                    path={TestComponentPath3}

                    exact

                 /> }

    <Redirect to={redirectUrl} />

</Switch>

如果您担心重复代码，您可以在您的代码中添加额外的层，Route如下所示：

<Switch>

    <Route

        component={TestComponent}

        key={TestComponentPath}

        path={TestComponentPath}

        exact

    />

   {someCondition && [

            <Route

              component={TestComponent2}

              key={TestComponentPath2}

              path={TestComponentPath2}

              exact

            />,

            <Route

              component={TestComponent3}

              key={TestComponentPath3}

              path={TestComponentPath3}

              exact

            />

    ]}

    <Redirect to={redirectUrl} />

</Switch>

Answer 2

我喜欢<ProtectedRoute>组件的想法：

import { Component } from 'react';

import { Redirect, Route } from 'react-router-dom';

class ProtectedRoute extends Component<any> {

  render() {

    const { component: Component, allow, ...props } = this.props;

    if (!allow) {

      return <Redirect to={{ pathname: '/signin' }} />;

    }

    return <Route {...props} render={(props) => <Component {...props} />} />;

  }

}

export default ProtectedRoute;

然后像下面这样使用它：

<Router history={history}>

  <Route path={yourRootPath} component={App} exact>

    <Route path="home" component={Home} />

    <Route path="about" component={About} />

    <ProtectedRoute path="inbox" component={Inbox} allow={this.props.mail} />

    <ProtectedRoute path="contacts" component={Contacts} allow={this.props.mail} />

  </Route>

</Router>

我尝试按照公认的答案使用数组，但没有奏效，因为JSX 表达式必须有一个父元素（也许这曾经在旧的 React 版本中工作），而且我不想重复代码。