React-Router基础学习

参考网址: https://reacttraining.com/react-router/web/api/NavLink

Router与Route

import {HashRouter as Router,Route} from "react-router-dom";
{/* 必须使用 Router 包裹 Route 的形式 */}
<Router>
  {/* 引用组件方式一 */}
  <Route path="/home" component={Home}></Route>
  <Route path="/shop" component={Shop}></Route>
  {/* 引用组件方式二 */}
  <Route path="/demo" render={()=> <div>hello Demo</div>}></Route>
  <Route path="/demo" render={()=> <Demo/>}></Route>
</Router>

exact与strict

import {HashRouter as Router,Route} from "react-router-dom";
{/* exact: 希望该路径为精准匹配 即为只有访问它的时候才会显示, /mine/ 这种正常显示显示 */}
{/* strict: 更深一层的精准匹配 只有路径一模一样才显示, /mine/ 这种也会不显示 */}
{/* 如果想使用strict 必须要使用exact 不然不会生效 反之则不会 */}
<Route exact strict path="/mine" component={Mine}></Route>

Switch

import {HashRouter as Router,Switch,Route} from "react-router-dom";
{/* Switch下的路由同时只会加载一个 */}
<Router>
	<Switch>
		<Route path="/home" component={Home}></Route>
		<Route path="/shop" component={Shop}></Route>
	</Switch>
</Router>

自定义404访问页面

import {HashRouter as Router,Switch,Route} from "react-router-dom";
{/* 访问不存在的路径时就会显示 NotFound 组件 */}
<Switch>
	<Route path="/home" component={Home}></Route>
	<Route path="/shop" component={Shop}></Route>
	<Route component={NotFound}></Route> 
</Switch>

link与navlink

import {Link, NavLink} from "react-router-dom";
{/* link实际上就是a标签的链接跳转 */}
<Link to="/home">Home</Link>
{/* NavLink会给当前点击的路由和它所包裹的路由添加一个class名 active */}
{/* 可以使用自带的activeClassName属性为当前点击路由更换class名 */}
<NavLink to="/home" activeClassName="select">Home</NavLink>

路由传参

import {Switch, Route , Link, NavLink} from "react-router-dom";
<Router>
	<Switch>
	   {/* 可以直接在url后拼接 使用 new URLSearchParams(this.props.location.search).get('name') 获取 */}
	   
	   {/* 可以直接在路由路径后拼接传递 对应组件获得this.props.match.params.id */}
	   <Route path="/mine/ucnter/:id?" component={UCenter}></Route>
	   
	   {/* 使用render时可以直接在引用组件内正常传参 对应组件获得this.props */}
	   <Route path="/demo" render={()=> <Demo name="你好" />}></Route>   
	</Switch>
</Router>

{/* 跳转携带参数 */}
<NavLink 
  to={{
    pathname: 'select', //跳转地址
    search: '?id=007',  //传递参数,相当于url后?拼接
    state: {aaa: '12213'} //this.props.location.state.aaa 需要在获取时判断是否有state 不然如果该路由为默认值会报错
 }}>Select
</NavLink>

路由重定向

import {Redirect} from "react-router-dom";
{/* 使用Redirect完成简单的路由重定向,直接触发 */}
<Redirect from='/hellomine' to='/mine'></Redirect>

// 方法触发路由重定向
handleClick = () =>{
    const {isLogin} = this.state
    console.log(this.props);
    if (!isLogin) {
      // 如果当前组件没有直接被路由管理,就没有路由对象 无法进行跳转
      // 可以使用withRouter在导出当前组件时包裹定义 export default withRouter(Shop)
      this.props.history.push('/home')  //会在浏览器的history中创建新的历史记录,上一次的页面依然存在在内存中
      // this.props.history.replace('/home')  //不会在浏览器的history中创建新的历史记录,新页面在内存中替换了上一页面
    }
  }