使用 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>&nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; component={TestComponent}&nbsp; &nbsp; &nbsp; &nbsp; key={TestComponentPath}&nbsp; &nbsp; &nbsp; &nbsp; path={TestComponentPath}&nbsp; &nbsp; &nbsp; &nbsp; exact&nbsp; &nbsp; />&nbsp; &nbsp; { exampleCondition &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={TestComponent2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={TestComponentPath2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={TestComponentPath2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exact&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/> }&nbsp; &nbsp; { exampleCondition &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={TestComponent3}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={TestComponentPath3}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={TestComponentPath3}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exact&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/> }&nbsp; &nbsp; <Redirect to={redirectUrl} /></Switch>如果您担心重复代码，您可以在您的代码中添加额外的层，Route如下所示：<Switch>&nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; component={TestComponent}&nbsp; &nbsp; &nbsp; &nbsp; key={TestComponentPath}&nbsp; &nbsp; &nbsp; &nbsp; path={TestComponentPath}&nbsp; &nbsp; &nbsp; &nbsp; exact&nbsp; &nbsp; />&nbsp; &nbsp;{someCondition && [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={TestComponent2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={TestComponentPath2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={TestComponentPath2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exact&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={TestComponent3}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={TestComponentPath3}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={TestComponentPath3}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exact&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; ]}&nbsp; &nbsp; <Redirect to={redirectUrl} /></Switch>

Answer 2

我喜欢<ProtectedRoute>组件的想法：import { Component } from 'react';import { Redirect, Route } from 'react-router-dom';class ProtectedRoute extends Component<any> {&nbsp; render() {&nbsp; &nbsp; const { component: Component, allow, ...props } = this.props;&nbsp; &nbsp; if (!allow) {&nbsp; &nbsp; &nbsp; return <Redirect to={{ pathname: '/signin' }} />;&nbsp; &nbsp; }&nbsp; &nbsp; return <Route {...props} render={(props) => <Component {...props} />} />;&nbsp; }}export default ProtectedRoute;然后像下面这样使用它：<Router history={history}>&nbsp; <Route path={yourRootPath} component={App} exact>&nbsp; &nbsp; <Route path="home" component={Home} />&nbsp; &nbsp; <Route path="about" component={About} />&nbsp; &nbsp; <ProtectedRoute path="inbox" component={Inbox} allow={this.props.mail} />&nbsp; &nbsp; <ProtectedRoute path="contacts" component={Contacts} allow={this.props.mail} />&nbsp; </Route></Router>我尝试按照公认的答案使用数组，但没有奏效，因为JSX 表达式必须有一个父元素（也许这曾经在旧的 React 版本中工作），而且我不想重复代码。