配置 react-router-dom 会产生错误：Invariant failed: You should not use <Link> outside a <Router>

Question

我正在尝试设置一个新的 react 应用程序。

我在配置路由器时遇到问题（我认为）。

到目前为止，我的 index.js 有：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import './index.css';
import App from './App';
import About from './pages/about/About';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM.render(
    <Router>
      <div>
        <Switch>
            <Route path="/" exact component={App} />
            <Route path="/about" component={About} />

        </Switch>
      </div>  
    </Router>,
    document.getElementById('root')
);

我的 / 路径中还有一个页脚，其中包含以下链接：

import React from 'react';
import { Link } from 'react-router-dom'
import { Row, Col, Typography } from 'antd';


const { Text, Title } = Typography;

function StandardFooter() {
    return (
      <div>
        <Row type="flex" justify="space-around">
            <Col span={4}>
                <Text type="secondary">
                    <Link to={'/about'} >About</Link>
                </Text> <br />

            </Col>
            <Col span={4}>
                <Text strong>Legal</Text>
            </Col>

        </Row>
      </div>
    );
  }

  export default StandardFooter;

但是当我尝试渲染它时，我收到一条错误消息：错误：不变量失败：您不应该在路由器之外使用链接

我已尝试删除并重新安装 react-router-dom。它没有任何区别。是不是少了一个步骤？

Answer 1

删除此行：ReactDOM.render(<App />, document.getElementById('root'));

这一行很可能是错误的根源，因为您的 <App /> 组件树包含一个 <Link />，并且在这种情况下您正在渲染它而没有 <BrowserRouter />。