相对v5的变化
1.Route需要用Routes包裹
2.组件用element表示
3.路由内有嵌套需要加*
<Routes>
<Route path='/datatable/*'element={<Datatable/>} />
<Route path='/schedule/*'element={<Datatable/>}/>
</Routes>
同时,子级路由的path前缀不需要加上父级的path,/为根目录。
1.相比v5,删除Redirect改为Navigate,作用同为重定向
2.useNavigate代替userHistory和withRouter 作用为编程式导航
不管是否为路由组件,都可以使用
<Route path="/" element={<Navigate to="/datatable" />} />
const navigate = useNavigate(); //注意要写在函数组件内,否则会报错
navigate(-1); //后退
navigate('/',
{
replace: //默认为false,
state:
})
获取路由上传的的参数
path="home:/id:/data:"
to="home/1/'abcd'";
const {id,data} = userParams()
注册路由表
可以把所有路由写在一个文件下
const element=useRoutes([
{
path:"home",
element:<HomePage/>
},
])
使用{element},作用等同于RoutesRoute等组件…
占位组件,为嵌套路由占位
<Outlet/> //可以使用useOutlet查看嵌套路由对象