1:路由分为前端路由和后端路由
后端路由用来处理用户提交的请求,当node接受到一个请求的时候,根据请求路径找到匹配的路由,调用路由中的函数来处理请求,然后然后响应数据
前端路由:用来展示页面内容
2:简单准备工作
下载react-router-dom:npm i --save react--router-dom
引入bootstrap.css 样式
确认导航区和显示区,导航区的a 需要写为Link标签 展示区写Router标签进行路由匹配,App标签外面需要包裹 BrowserRouter 或者HashRouter 标签
3:路由切换显示过程:
(1)在index.js中 引入 BrowserRouter路由,把app进行包裹
(2)在components创建两个组件 然后再这里面分别 从react中引入Component 然后export导出 div 需要显示内容
(3)然后再app中引入这两个组件 ,并且再react-router-dom中引入Link{形成标签},和Router{呈现组件}
(4)然后在render中return出去Link 用来匹配地址 br下面 用来进行路由匹配显示组件Router
这样就可以点击然后有不同的页面了。
4:NavLink 和Link区别:
用NavLink点击的时候会自动带class:active这个类,也可以在NavLink标签进行修改用activeClassName=“自定义类”
5:对NavLink 进行封装,
在component中创建MyNavLink 然后再这其中从react引入Component 从react-router-dom中引入Navlink。
然后在export导出MyNavLink render里面return出去NavLink标签。
这时在app.js里面br上面就可以不用写NavLink标签,直接在上方import封装的 ,然后写上等装好的名做标签就可以了 。
6:NavLink 传值
log输出发现NavLink标签中有props 值有to 和childer
所以我可以在NavLink标签中 把{...this.props}扔进去 这样就使得NavLink标签有了to 和childer属性
childer携带得数据就是使用标签使写得文字
to就是标签使用得地址
7:Switch得使用
一般path和component是一种对应关系,当用了switch之后就匹配路径就可以了,不用在往下写了
一般解决问题:就是当我创建了两个组件得时候,我用了path给他们俩匹配一样得路径,但是组件匹配不一样,当我点击这个路径得时候就会出现两个组件显示内容。(没用)
(1)在react-router-dom中引入switch
然后把br下面显示得router展示 用switch标签包裹 这样当我点击时就不会出现两个组件得内容。而是进行对应显示。
8:标签加上exact为精确匹配