Навбар, заставляющий другие компоненты не загружаться в React Router

Question

Я настраиваю базовую c навигационную панель, она просто имеет несколько кнопок, а не какой-либо сложный журнал или что-то еще. Когда у меня есть эта панель навигации внутри коммутатора, никакой другой комп onet не загружается, что означает, что я не могу обернуть панель навигации между определенными компонентами, когда у меня есть панель навигации вне коммутатора, тогда она работает, и я могу просто проверить, есть ли реквизиты. match.location et c - это "/", а не загружать его на домашней странице, поэтому я нашел обходной путь, но что могло быть причиной этой ошибки или ожидалось, что я поведу, я подозреваю, что мои wildroutes, но не на 100% уверены, что. Где я использую navbar

const App = () => {
    return (
        <div>
            <Router>
                <Switch>
                    <Route component={theNavbar} />

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

                    <Route exact path="/api/:city/electronics" component={Electronics} />
                    <Route exact path="/api/:city/labour" component={Labour} />

                    <Route exact path="/api/posts/item/:id" component={ItemDetails} />

                    <Route exact path="/create/:city/:category" component={CreatePost} />
                </Switch>
            </Router>
        </div>
    );
};

Answer 1

Это вполне ожидаемое поведение, вызванное парой факторов. Во-первых, это Switch, а во-вторых, что-либо Route для навигации.

Switch

Визуализирует первый дочерний <Route> или <Redirect>, который соответствует расположению.

Все последующие совпадения не будут отображаться вообще.

Route path

Маршруты без пути всегда совпадают.

<Route component={theNavbar} />

Этот маршрут соответствует все места и, таким образом, всегда будут совпадать. Быть перечисленным первым внутри Switch означает, что он всегда будет отображаться.

Решение всегда отображать некоторый компонент навигации при одновременном сопоставлении других маршрутов - переместить этот компонент за пределами Switch, но все еще в пределах Router.

Answer 2

Это ожидаемое поведение. Согласно документации React Router :

Маршруты без пути всегда совпадают.

Таким образом, ваш NavBar всегда будет совпадать в <Switch> и ни один из других компонентов не будет отображаться.