第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 Fragment 時，重定向在 Switch 內(nèi)不起作用

使用 Fragment 時，重定向在 Switch 內(nèi)不起作用

泛舟湖上清波郎朗 2021-11-04 10:45:58
版本"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>重現(xiàn)步驟顯示示例Switch，Redirect用例。預(yù)期行為redirectUrl如果沒有匹配的路徑，應(yīng)該重定向到給定的路徑。實際行為Redirect在 switch 結(jié)束時提供了類似 no 的行為。問題大概是因為React.Fragment里面已經(jīng)用過了Switch。刪除后重定向工作正常。示例沙箱https://codesandbox.io/s/react-router-tklng
查看完整描述

2 回答

?
犯罪嫌疑人X

TA貢獻2080條經(jīng)驗 獲得超4個贊

a 的所有子元素<Switch>都應(yīng)該是<Route>或<Redirect>元素。只會呈現(xiàn)與當前位置匹配的第一個孩子。


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


因為您使用的是 Fragment，所以您正在添加不受支持的其他子項，Switch因此您的代碼不會呈現(xiàn)。


您應(yīng)該按如下方式切換代碼，在不使用片段的情況下添加條件路由：


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

如果您擔(dān)心重復(fù)代碼，您可以在您的代碼中添加額外的層，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>


查看完整回答
反對 回復(fù) 2021-11-04
?
繁花如伊

TA貢獻2012條經(jīng)驗 獲得超12個贊

我喜歡<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>

我嘗試按照公認的答案使用數(shù)組，但沒有奏效，因為JSX 表達式必須有一個父元素（也許這曾經(jīng)在舊的 React 版本中工作），而且我不想重復(fù)代碼。


查看完整回答
反對 回復(fù) 2021-11-04
  • 2 回答
  • 0 關(guān)注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號