react-router-dom v6.x 使用记录

大半夜，睡不着，起来撸代码的有么。。。

言归正传，总结一下react-router-domv6.x的变动，供大家参考：

1、Route要用Routes包裹（v6.x之前是Switch），否则会报这个错误

export class App extends React.Component {
    render() {
        return <>
            // v6.x版本
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Index />}></Route>
                </Routes>
            </BrowserRouter>
            // v6.x之前的
            <BrowserRouter>
                <Switch>
                    <Route path="/" component={Index}></Route>
                </Switch>
            </BrowserRouter>
        </>
    }
}

2、Route中的component替换成了element(代码如上)

3、路由跳转 useNavigate()

import { useNavigate } from 'react-router-dom';
const navigateLo = (props) => {
    const navigate = useNavigate();
    return (
        <form onSubmit={() => navigate('../', { replace: true })}>
            {...}
        </form>
    )
}