Question

我正在构建一个具有静态营销网站和动态应用程序的React应用程序。我正在使用React Router和Hook的组合来将两者分开，并确保整个过程中路由正确。

首先，我希望登录的用户在打根（“ /”）时直接被带到应用程序，而在未登录时被带到静态/营销站点。营销主站点主页具有导航栏，该导航栏允许用户访问其他路线，例如“ / about”，而该应用程序具有用于导航的单独导航栏。

问题是，虽然根路由的基于身份验证的路由似乎正在运行，并且我可以导航到顶级文件中指定的其他路由，但我的内部中包含的路由静态/营销网站无法访问。

Top-level / 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;

website / 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路由移至底部，然后使其具有以下路径：“ /：rest *”（也许“ / *”也可以使用，但在一会儿。）

那样，如果前两个不匹配，它将使用Route。

React Router：路由内的路由

1 个答案: