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

结果演示

841条评论

  • instagram takipçi satın al

    I think everything posted was actually very logical.
    But, think on this, what if you typed a catchier
    title? I mean, I don’t want to tell you how
    to run your blog, however suppose you added something
    that makes people desire more? I mean react-router-dom与react-router-config使用 –
    RocYuan is kinda vanilla. You might peek at Yahoo’s home page and note how they create
    article titles to grab viewers to click. You might add a
    related video or a picture or two to get people interested about everything’ve got to
    say. Just my opinion, it might bring your posts a little livelier.

  • bit.ly/3sF2nN1

    I was pretty pleased to discover this page. I need to to thank you for ones time for this fantastic
    read!! I definitely savored every part of it and I
    have you saved to fav to look at new stuff in your website.

  • türk takipçi

    I’m not certain the place you are getting your information,
    but great topic. I must spend a while learning
    more or working out more. Thank you for excellent info
    I used to be in search of this info for my mission.

Leave a Reply

邮箱地址不会被公开。