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>

通常，我将非常确定问题出在哪里-受影响节点的父节点中某处缺少路由器。

但是，在我的情况下，SignIn呈现如下：

    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）包装Switch。

尝试这样做

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>元素中。

尽管有可用的BrowserRouter，但“您不应在<router>外使用<switch>”

2 个答案: