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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

ReactJS 路由頁(yè)面刷新

ReactJS 路由頁(yè)面刷新

慕雪6442864 2023-12-14 14:12:58
目前正在使用 ReactJS 構(gòu)建一個(gè)小型 Web 應(yīng)用程序。我有以下父函數(shù):    const Main = () => {        return (            <div className="dialog-base">                <BrowserRouter>                    <Switch>                        <Route exact path="/login" component={Login}></Route>                        <Route exact path="/login/forgot_password" component={ForgotPwd}></Route>                        <Route exact path="/login/reset_password/:key" component={ResetPwd}></Route>                        <Route exact path="/portal" component={Portal}></Route>                    </Switch>                </BrowserRouter>            </div>        );     }以下是“Portal”組件:class Portal extends React.Component {    render = () => {        return (            <BrowserRouter basename="/main">                 <div className="navmenu">                     <NavLink to="messaging" activeClassName="selected">Messaging</NavLink>                     <NavLink to="files" activeClassName="selected"></NavLink>                     <NavLink to="payledger" activeClassName="selected"></NavLink>                 </div>                 <div className="apparea">                     <Switch>                         <Route path="/messaging" component={Messaging}></Route>                         <Route path="/files" component={Files}></Route>                         <Route path="/payledger" component={PayLedger}></Route>                     </Switch>                 </div>            </BrowserRouter>        );    }}當(dāng)加載門戶組件并刷新網(wǎng)頁(yè)時(shí),頁(yè)面變?yōu)榭瞻?。我假設(shè)這與嵌套路由有關(guān)?任何有關(guān)如何修復(fù)它的幫助將不勝感激。
查看完整描述

1 回答

?
蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

你不需要兩個(gè)<BrowserRouter />。<BrowserRouter />只需在頂級(jí)組件中定義一個(gè)即可。在react-router-dom v4+中,它<Route />就像一個(gè)常規(guī)組件,當(dāng)路徑與URL匹配時(shí),您可以在組件中使用它來(lái)渲染UI。

這是工作的codesandbox示例。確保不要放在exact你的父路由上<Route />,因?yàn)楫?dāng)你有像這樣的子路由時(shí),/main/messaging永遠(yuǎn)<Route exact path="/main" />不會(huì)渲染,因此該路由的子路由也無(wú)法渲染。

您保持<Main />組件不變,但從exact中刪除<Route path='/portal' />并更改<Portal />.

class Portal extends React.Component {

  render = () => {

      return (

         <React.Fragment>

             <div className="navmenu">

                 <NavLink to="/portal/messaging" activeClassName="selected">Messaging</NavLink>

                 <NavLink to="/portal/files" activeClassName="selected"></NavLink>

                 <NavLink to="/portal/payledger" activeClassName="selected"></NavLink>

             </div>

             <div className="apparea">

                 <Switch>

                     <Route path="/portal/messaging" component={Messaging}></Route>

                     <Route path="/portal/files" component={Files}></Route>

                     <Route path="/portal/payledger" component={PayLedger}></Route>

                 </Switch>

             </div>

          </React.Fragment>

      );

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-12-14
  • 1 回答
  • 0 關(guān)注
  • 272 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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