react中 路由的基础配置

react路由的使用

React-router

React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。

一. 安装react-router-dom

使用命令行 npm i react-router-dom --save 安装

二.在src下新建一个目录 router 在router 下新建一个index.js

三.引入要加入路由的组件   并从react-router-dom中引入需要用的组件 在这里使用browserrouter 


四.写一个class  在render中配置路由 

    LInk标签的to 表示跳转路径   

    Route中Path 表示 路由路径  component  是相对应组件

    

   最后记得导出


五.在app.js中引入这个routerIndex就完成了


现在就可以使用基础的路由了   

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 童年的记忆里都是伴着张太太纳鞋底拉绳子的嘶嘶声睡觉的。 困得睁不开眼睛时去看房顶垂下来的灯泡,灯泡旁边会有七彩的光...
    张会_daf9阅读 199评论 0 0
  • 一阶复训第三天,感觉自己也没有特别的收获,也就识别号码比一阶时清晰了些,对除了七号外(别的八个号)更多的接纳与...
    陈玫瑰7W6阅读 320评论 0 6

友情链接更多精彩内容