升级react-router-dom至v6的改动

104 阅读1分钟

升级依赖 react-router-dom至v6

"react-router-dom": "6"

Switch已弃用,需要改成Routes

v5版本
<Switch>
 <Route exact path="/login" component={Login} />
 <Route path="/" component={Home} />
</Switch>

v6版本
<Routes>
  <Route path="/login" exact={true} element={<Login />} />
  <Route path="/*" element={<Home />} />
</Routes>

component 以及弃用,改成element

v5版本
<Route path="/" component={Home} />

v6版本
<Route path="/*" element={<Home />} />

location改成了钩子函数useLocation里获取 navigate改成了钩子函数useNavigate里获取 params改成了钩子函数useParams里获取

import { useNavigate, useLocation, useParams } from 'react-router-dom';

const location = useLocation();
const navigate = useNavigate();
const params = useParams();

history.replace改成了navigate

v5版本
history.replace(`/${dataType}`);
v6版本
this.props.navigate(`/${dataType}`, { replace: true })