“您不应该在 <Router> 之外使用 <Link>”嵌套路由中的问题

Question

我看过一个类似的问题，但不幸的是我的代码中仍然有一个我似乎无法解决的错误:(

我的 react-router-dom 版本是 5.2.0，我的 react 版本是 17.0.2。

我正在构建一个更复杂的 React 应用程序，但我也可以使用下面的简单代码复制错误。除了 <Test /> 组件之外，我基本上已经从应用程序中删除了所有内容。

这是我的 App.js 文件，我在其中使用 React-Router 并且有一个 '/test' 的路由。在那条路线上，我正在渲染我的 <Test /> 组件，然后还使用 React-Router 的 <Link /> 组件。 这工作得很好！下面是我的 App.js 和 Test.js 文件的代码。

App.js：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';

const App = () => (
    <Router>
        <Switch>
            <Route exact path='/test'>
                <Test />
                <Link to='/' className='text-white'>
                    Go back home
                </Link>
            </Route>
        </Switch>
    </Router>
);

export default App;

Test.js

import React from 'react';

const Test = () => {
    return (
        <>
            <h1 className='text-white'>Hello, world</h1>
        </>
    );
};

export default Test;

当我尝试将 Link 从 react-router-dom 带入我的 <Test /> 组件时，我的错误发生了。例如，我正在尝试这样做：< /p>

Test.js

import React from 'react';
import { Link } from 'react-router-dom';

const Test = () => {
    return (
        <>
            <h1 className='text-white'>Hello, world</h1>
            <Link to='/' className='text-white'>
                Go back home
            </Link> 
        </>
    );
};

export default Test;

但是每当我访问 /test（即 http://localhost:3000/test）时，我的应用程序都会中断，我会看到“错误：不变失败：您不应在路由器外使用链接。”截图如下：

我以为我找到了一个 answer here，但我不明白从我的包中导入或导出是什么意思。

非常感谢任何帮助！这在我的应用程序中一直是一个巨大的障碍，因为我试图在 <Link /> 内呈现的其他组件中使用 React-Router 的 <Switch /> 组件。

Answer 1

尝试将其放入 Route 道具渲染中：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';

const App = () => (
   <Router>
      <Switch>
        <Route
          exact
          path="/test"
          render={() => ( // look at this
            <>
              <Test />
              <Link to="/" className="text-white">
                Go back home
              </Link>
            </>
          )}
        />
      </Switch>
    </Router>
);

export default App;

Answer 2

我可以通过删除我的 node_modules 目录，然后使用 npm install 重新安装所有必需的软件包来修复该错误！嵌套的 <Link /> 组件现在按预期工作。