«Вы не должны использовать <Switch>вне <Router>», несмотря на доступный BrowserRouter

Question

При попытке развернуть мой веб-сайт я сталкиваюсь со следующей ошибкой:

Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
    in Switch (created by SignIn)
    in div (created by SignIn)
    in div (created by SignIn)
    in SignIn (created by LogonPage)
    in div (created by LogonPage)
    in div (created by LogonPage)
    in LogonPage
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

вместе с

Uncaught Invariant Violation: You should not use <Switch> outside a <Router>

Обычно я вполне уверен, в чем проблема - отсутствуетМаршрутизатор где-то в родительском узле уязвимого узла.

Однако в моем случае визуализация входа в систему выглядит следующим образом:

    return (
        <div className="signInContainer container">
            <div className="signInMethodPicker row">
                <Link to="/register" className="signInMethodBtn registerBtn col">{Translation.Register}</Link>
                <Link to="/login" className="signInMethodBtn loginBtn col">{Translation.Login}</Link>
            </div>
            <hr />
            <div>
                <Switch>
                    <Route exact path="/" render={props => <RegisterDialog {...props} />} />
                    <Route exact path="/register" render={props => <RegisterDialog {...props} />} />
                    <Route exact path="/login" render={props => <LoginDialog {...props} />} />
                </Switch>
            </div>
        </div>
    );

и данный Маршрутизатор в точке входа здесь:

$(() => {
    ReactDOM.render(
        <Provider store={store}>
            <BrowserRouter>
                <LogonPage />
            </BrowserRouter>
        </Provider>,
        document.getElementById("logonPageHolder"));
});

Маршрутизатор импортируется следующим образом: import { BrowserRouter } from "react-router-dom";

Между ними есть слой, но, учитывая, что я недавно переписал свое приложение, и оно ранее работало, я не вижу, что может происходитьнеправильно.

В свете моего недавнего переписывания я очень подозреваю, что эта проблема основана на странном управлении версиями, но мне все еще нужны некоторые рекомендации для ее решения, поскольку исследование этой ошибки обычно дает только результаты, указывающие на проблемыгде люди на самом деле забыли визуализировать <Router> компонент, что здесь не так.

Answer 1

Вам нужно обернуть коммутатор BrowserRouter или другими альтернативами, такими как HashRouter, MemoryRouter.

Попробуйте сделать это скорее

import { BrowserRouter, Switch, Route } from 'react-router-dom';

А затем заверните все так

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

Answer 2

Если вы пытаетесь показать ссылку на странице или любом элементе за пределами BrowserRouter, вы получите такое сообщение об ошибке.

Ваша ошибка говорит о том, что любой компонент, который не является дочерним по отношению к Router, не может содержать компоненты, связанные с React Router.

Проверьте вашу иерархию, в React-Redux иерархия очень важна.

Я всегда гарантирую, что иерархия будет выглядеть следующим образом: Provider-> App-> BrowserRouter.

Итак, в вашем компоненте SignIn или LogIn, где у вас есть те теги Link и Switch, которые необходимо импортировать следующим образом:

import { Link, Switch } from "react-router-dom";

И затем этот компонент должен находиться внутри <BrowserRouter> элементов.