React Router：路由內的路由

Question

我正在構建一個具有靜態營銷網站和動態應用程序的React應用程序。 我正在使用React Router和Hook的組合來將兩者分開，並確保整個過程中路由正確。

首先，我希望登錄的用戶點擊根目錄（“ /”）后直接進入應用程序，而未登錄時直接進入靜態/營銷網站。主要的營銷網站首頁具有導航欄允許用戶訪問其他路線，例如“ / about”，而該應用程序則具有用於導航的單獨導航欄。

問題是，當根路由認證的路由似乎是工作，我可以導航到我的頂層文件中指定的其他路線，這包括我的靜態/營銷網站內的路由不可訪問。

頂級/index.js

const routing = (
  <Provider store={store}>
    <Router>
      <NavWrapper />
      {/* <Switch> */}
      <Route exact path="/" component={AuthWrapper} />
      <Route path="/signup" component={SignUp} />
      <Route path="/login" component={Login} />
      {/* </Switch> */}
    </Router>
  </Provider>
)

ReactDOM.render(routing, document.getElementById('root'));

AuthWrapper.js（此處useAuth()是一個React鈎子，用於評估全局Redux isAuthenticated狀態）

const AuthWrapper = (props) => {
  return useAuth() ? <App /> : <Website />
}

export default AuthWrapper;

網站/index.js

export const Website = () => {
  return (
    <>
      {/* <SiteNav /> */}
      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/how-it-works" component={HowItWorksPage} />
        <Route path="/plans" component={PlansPage} />
        <Route path="/press" component={PressPage} />
        <Route path="/faq" component={FAQPage} />
        <Route path="/legal" component={LegalPage} />
        <Route path="/for-dieticians" component={DietitiansPage} />
        <Route path="/for-trainers" component={PTsPage} />
      </Switch>
  </>
  )
};

在我的應用程序中，當我輸入localhost：3000 /（未經身份驗證）時，我會正確進入首頁/着陸頁。 但是，例如，如果我嘗試使用導航（或鍵入任何子路線）來訪問“ / about”，則會出現空白屏幕（導航欄除外）。 在React開發工具中，該組件甚至沒有渲染。

Answer 1

我認為這是問題所在：

<Route exact path="/" component={AuthWrapper} />

您還希望同時顯示Authwrapper，對嗎？ 但以上僅與“ /”完全匹配。

您應該啟用switch語句，但是將AuthWrapper Route移到底部，然后使其具有以下路徑：“ /：rest *”（也許“ / *”也可以使用，有一段時間沒有使用react-router了）。

這樣，如果前兩個不匹配，它將使用Route。