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就完成了


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

你可能感兴趣的:(react中 路由的基础配置)