React Router：路由内的路由

Question

I am building a React app that has a static marketing site and a dynamic app. I am using a combination of React Router and hooks to separate the two and ensure proper routing throughout.

To begin with, I want users who are logged in to be taken directly to the app when they hit the root ("/") and to the static/marketing site when not logged in. The main marketing site home page has a nav bar that allows users to access other routes such as "/about", whereas the app has a separate nav bar for app navigation.

The problem is, while the authentication based routing for the root route seems to be working, and I can navigate to other routes specified in my top-level file, the routes that are included within my static/marketing site are not accessible.

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 (here useAuth() is a React hook that evaluates global Redux isAuthenticated state)

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>
  </>
  )
};

In my app, when I enter localhost:3000/ (unauthenticated) I am correctly taken to my home/landing page. However, if I try to use the navigation (or type in any subroutes) to access "/about" for example, I get a blank screen (other than the nav bar). In the React dev tools, the component isn't even rendering.

Answer 1

I think this is the issue:

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

You want Authwrapper to be shown for about as well, right? But the above only matches "/" exactly.

You should enable the switch statement, but move the AuthWrapper Route to the bottom and then let it have this path: "/:rest*" (maybe "/*" works too, haven't used react-router in a while).

That way, it will use the Route if the first 2 don't match.