react-router常见错误

Router can have only one child, so wrap all the routes in a _div_ or Switch

只能有一个子元素，<>，div，或 Switch，因为 Router渲染的是 this.props.children
https://reacttraining.com/react-router/web/api/Switch)

Link报错

You should not use outside a

Uncaught Error: Invariant failed: You should not use outside a

_R_eact-route v4 版本后，不允许在Router外部使用Link；需要这样使用
把 Link标签放在 BrowserRouter 里面

• 如果一个组件要使用路由创建, 那么这个组件必须包裹在BrowserRouter, HashRouter中
• 将组件包裹在BrowserRouter,或HashRouter中即可
• React-router4.0版本和React-router2.0版本不兼容的

import { BrowserRouter as Router, Link } from 'react-router-dom';
<Router>
  <Link />
  <Link />
</Router>

将BrowserRouter包裹到根节点上，子组件使用withRouter才会生效，不然即使不报错 参数也是获取不到的。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import ReactFastClick from 'react-fastclick';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactFastClick(); // 解决 ios点击不生效问题
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>  // 包裹根组件
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();