react

react-router-dom与react-router-config使用

react-router-dom使用

HashRouter:路由的类型,哈希模式
BrowserRouter:路由的类型,HTML5 history模式
NavLink:路由按钮默认转成a标签,选中的路由对应的a标签带有active的class名;Link不带active的class名。
Route:匹配路由显示对应的组件
Redirect:重定向
Switch:匹配到对应路由时不会向下匹配

……更多api及属性查看react-router官网

https://reactrouter.com/web/guides/quick-start

这样写路由在项目中路由不利于管理(以上还只是简单的单层路由,还没有路由业务),于是我们会用 react-router-config统一管理路由。

react-router-config使用

用react-router-config提供的renderRoutes方法渲染显示的组件,renderRouter接收一个参数,这个参数可定义路由及重定向等…

更多使用方式参考

https://www.npmjs.com/package/react-router-config

结果演示

593条评论

Leave a Reply

邮箱地址不会被公开。