react-router-dom学习笔记

• 一、安装调用
• 二、使用Link跳转
• 三、导航栏跳转
• • 1、路由组件和普通组件
  • 2、history插件
  • 3、window.location.href

一、安装调用

https://www.npmjs.com/package/react-router-dom

npm install --save react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

二、使用Link跳转

设置路由组件

<Router>
   <div>
       <Route exact path='/' component={Blog}></Route>
       <Route exact path='/Login' component={Login}></Route>
       <Route exact path='/ArticleAdd' component={ArticleAdd}></Route>
   </div>
</Router>

设置跳转链接

<Link className="b" to="/Login">登录</Link>

NavLink点击高亮显示

<NavLink activeClassName="a" className="b" to="/Login">登录</NavLink >

三、导航栏跳转

1、路由组件和普通组件

普通组件：父组件传入参数时props有值

<Login />

路由组件：父组件即使不传入参数，也带有三个属性：history，location，match

<Route exact path='/Login' component={Login}></Route>

通过this.props.history.push实现路由的跳转，我还没有实现

2、history插件

安装

npm i history@4.1.0

引入

import { createBrowserHistory } from 'history'
const history = createBrowserHistory();

点击跳转

    handleClick=(ele)=>{
        history.push({ pathname: tabPathMap.get(ele.key) })
        history.go();  //没有go，只跳转路由，不刷新组件
    }

3、window.location.href

window.location.href=tabPathMap.get(ele.key)

window.location.href也可以实现跳转，那么history和window.location.href的区别？