react路由跳转及动态路由:（声明式导航）

一、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
后面随便接参数都可以访问，不接参数就不能访问