一、React路由的跳转:(声明式导航)
跟vue的 router-veiw 一样 ,替换a标签:好处是可以实现高亮
React路由跳转用,<Navlink to={ 你要跳转的页面}>
import React, { Component } from 'react' //引入react核心
import {NavLink} from 'react-router-dom' //从路由配置中引入Navlink
import './index.css'//引入设置好的css样式(高亮效果样式)
export default class SideMenu extends Component { /创建路由
render() {
let path="/home" //可以定义一个变量接收要调转的地址
return (
<div style={{background:"yellow"}}>
SideMenu
<ul>
<li>
{/* <router-link :to=""> */}
<NavLink to={path} activeClassName="kerwinactive">home</NavLink>
</li> // 调转到path定义的home页面去,并设置高亮样式。
<li>
<NavLink to="/right-manage/roles" activeClassName="kerwinactive">roles</NavLink>
</li> //用跳转到right-manage/roles页面去,并设置高亮显示效果
<li>
<NavLink to="/right-manage/rights" activeClassName="kerwinactive">rights</NavLink>
</li>
</ul>
</div>
)
}
}
/*
注:浏览器出现提示:Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
因为history带#号的,重复多次点击没有切换页面,就会出现以上提示。
解决:将Hash模式 改成 BrowserRouter
模式就可以了。
二、动态路由
一般在详情页面的时候,用的比较多,?后面传递一个id过去, 根据这个id来渲染对应的数据
import React, { Component } from 'react'
import {Route,Redirect,Switch} from 'react-router-dom' //引入router路由配置
import Preview from '../article-manage/Preview'//引入组件
export default class DashBoard extends Component {
render() {
return (
<div>
<Route path="/article-manage/preview/:myid" component = {Preview}exact/> //通过:myid的方式设置动态路由
</Switch>
</div>
)
<Switch>
访问的动态路由,http://localhost:3000 /article-manage/preview/ 1
后面随便接参数都可以访问,不接参数就不能访问