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 />来呈现它。

配置react-router-dom会生成错误：不变失败：您不应在<Router>之外使用<Link>

1 个答案: