官网文档: https://reactrouterdotcom.fly.dev/
新特性
重命名为 的新特性变更 - 嵌套路由变得更简单
- 新钩子useRoutes代替react-router-config
- 用useNavigate代替useHistory
- Link 不再支持 component 属性
- NavLink 的 exact 属性替换为 end
- 大小减少:从20kb到8kb
重命名为
/* v5 */
} />
/* V6 */
} />
} />
的新特性变更:
1.废弃exact
2.component/render被element替代
3.routeProps可以在element中直接获取
4.简化的路径匹配,仅支持动态:id样式参数和*通配符,不再支持RegExp
嵌套路由
1.支持相对路径
2.
3.结合新API Outlet实现嵌套路由
import { HashRouter as Router, Routes, Route } from 'react-router-dom'
import Home from '@/pages/demo/Home'
import Foo from '@/pages/demo/Foo'
import Bar from '@/pages/demo/Bar'
import BarDetail from '@/pages/demo/BarDetail'
import '@/assets/style/App.css'
function App() {
return (
} />
} />
{/* 嵌套路由场景:需要在Bar(父路由的组件)声明Outlet组件,用于渲染子路由 */}
}>
} />
)
}
export default App
新API:Outlet
注意:嵌套路由场景,需要在父路由的组件(Bar)使用Outlet组件,用于渲染子路由
import { Outlet } from 'react-router-dom'
function Bar() {
return (
Bar
{/* 有嵌套路由的场景需要使用 */}
)
}
export default Bar
嵌套路由可配置化:useRoutes代替react-router-config
同理,配置化使用嵌套路由,Outlet 也是必要的
import { useRoutes } from 'react-router-dom'
import Home from '@/pages/demo/Home'
import Foo from '@/pages/demo/Foo'
import Bar from '@/pages/demo/Bar'
import BarDetail from '@/pages/demo/BarDetail'
import '@/assets/style/App.css'
function App() {
let element = useRoutes([
{
path: '/',
element:
},
{
path: 'foo',
element:
},
{
path: 'bar',
element: ,
children: [
{
path: ':id',
element:
}
]
}
])
return element
}
export default App
注意:入口文件需要添加Router包裹App组件,否则会报错
(可以理解为,useRoutes返回的相当于Routes标签下的内容)
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router } from 'react-router-dom'
import App from '@/App'
import '@/assets/style/index.css'
ReactDOM.render(
,
document.getElementById('root')
)
用useNavigate代替useHistory
/* v5 */
const history = useHistory()
history.push('/home')
history.replace('/home')
history.goBack()
history.goForward()
history.go(2)
/* V6 */
const navigate = useNavigate()
navigate('/home')
navigate('/home', {replace: true})
navigate(-1)
navigate(1)
navigate(2)
参考文献
https://reactrouterdotcom.fly.dev/
https://blog.csdn.net/weixin_40906515/article/details/104957712
https://zhuanlan.zhihu.com/p/434128579
https://juejin.cn/post/7025418839454122015