How to do react-router-dom routing correctly?

Question

React

There are 2 containers in App.jsx

<Router>
    <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/auth" component={Auth} />
    </Switch>
</Router>

In Main.jsx

<main>
    <Layout>
        <Sidebar />
        <Switch>
             <Route path="/rigs" render={() => <h1>hello</h1>} />
        </Switch>
    </Layout>
 </main>

That is, I need the Sidebar to be displayed everywhere except /auth/*. When switching to rigs, it is empty. What have I done wrong?

Answer 1

Your root route has the exact property, which means that the transition to it will be only if the path exactly matches /. The /rigs path will not render the Main component.
You can solve the problem like this:

<Switch>
  <Route path="/auth" component={Auth} />
  <Route path="/" component={Main} />
</Switch>