create react app
运行npm run eject暴露webpack.config.js文件
安装node-sass less less-loader(注意与webpack版本匹配)
新建route.js文件,在文件中配置路由列表
import Home from './pages/Home'
export const routeList=[{
path:'/',
component:Home
}]
安装 react-router-dom(6.x)
该版本中将Switch改为Routes,Route中的component属性改为element
路由跳转使用useNavigate()方法,否则会有路由更新但页面不更新的问题
const history = useNavigate()
history('http://xxxxxxx')
使用useParams()获取路由中的动态参数
在App.js中引入Route
新建route组件,根据route.js文件进行路由嵌套处理,然后将route组价引入App.js中使用
const renderRoute = (list: RouteType[]) => {
return list.map(item => {
if (!item.children) {
return <Route key={item.path} path={item.path} element={<item.component />} />
}
return <Route key={item.path} path={item.path} element={<item.component />} >
{item.children.map(el => <Route key={el.path} path={el.path} element={<el.component />} />)}
</Route>
})
}
return <HashRouter >
<Routes>
{renderRoute(routerList)}
</Routes>
</HashRouter>
新建layout.tsx文件
在layout文件中引入react-router-dom中的 <Outlet/>(相当于this.props.child)。
也可以在该页面中引入react-router-dom中的useLocation,useParams,useNavigate等方法进行之后页面的路由相关配置