Как правильно сделать маршрутизацию react-router-dom?

Question

[zayalexnick]

Есть 2 контейнера в App.jsx

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

В Main.jsx

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

То есть мне нужно, чтобы Sidebar отображался везде, кроме /auth/*. При переходе на rigs пусто. Что я сделал не так?

Answer 1

[Антон Спирин]

У вас у корневого маршрута стоит свойство exact, это значит, что переход на него будет только при точном совпадении пути с /. По пути /rigs компонент Main отрендерен не будет.
Решить проблему можно так:

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

Comments

[zayalexnick]

Тогда по пути /auth тоже появляется Sidebar

[Антон Спирин]

zayalexnick, может Switch забыли?

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

[zayalexnick]

Антон Спирин, Так у меня /auth/signin /auth/signup

[Антон Спирин]

zayalexnick, тогда надо убрать exact:

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

Логика работы роутера проста до безобразия. Switch перебирает роуты по порядку до первого совпадения.