react-router-dom

react-rourer-dom

引入

import React from 'react'
import {
    BrowerRouter, 
    HashRouter, 
    Link, 
    NavLink, 
    Route, 
    Switch, 
    Redirect, 
    withRouter
} from 'react-router-dom'

<BrowerRouter></BrowerRouter>

地址中不带#号
用于包裹Link或者NavLink，不然这两个不能使用，通常直接包裹在最外层的 <App /> 上

ReactDOM.render(
  <BrowerRouter>
    <App />
  </BrowerRouter>,
  document.getElementById('root')
);

<HashRouter></HashRouter>

地址中带#号

这种方式还是解决多级路径引入(用'./css/a.css'的方式)css等文件找不到的问题的方案之一,另外两种分别是不加一个小点(这种/css/a.css,这样的意思是pubilc文件夹下的css文件夹下的a.css文件)，当然也可以使用(%PUBLIC_URL%/css/a.css)

用于包裹Link或者NavLink，不然这两个不能使用，通常直接包裹在最外层的 <App /> 上

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

<Link />

可以用于普通的链接跳转

两种书写方式
<Link to="/link">linkName</Link>
<Link to="/link" children="linkName">

<NavLink />

和Link用法基本都一样，一般用于导航的

// activeClassName 是NavLink专门设置的属性，用于点击该link的的active样式，你的active的class名字也叫‘active’时，可以省略不填写，默认就是active
<NavLink activeClassName="active" to="link" />

<Route />

和Link或者NavLink关联使用，显示对应link的资源

<Route path="/link" component={componentName}></Route>

// 默认模糊匹配
// path要的路径，在Link组件和NavLink组件中的to必须一点都不能少，但是可以多
// <NavLink activeClassName="active" to="link" /> 这个不行
// <NavLink activeClassName="active" to="link/a/b/c" /> 这个行
<Route path="/link/a/b" component={componentName}></Route>

// 开启精准匹配（一般不开启，多级路由很容易匹配不了二级以后的路由）
// <NavLink activeClassName="active" to="link/a/b" /> 必须这样才行
<Route exact path="/link/a/b" component={componentName}></Route>

<Switch></Switch>

用于包裹 <Route />,当匹配上路径就不向下查找了，提够效率,也可以避免命名重复，两个组件都显示出来了

<Switch>
    <Route path="/link1" component={componentName1}></Route>
    <Route path="/link2" component={componentName2}></Route>
</Switch>

<Redirect />

重定向路由,当没有匹配上的路由时，定向到该路由，一般放在所有路由底部

<Switch>
    <Route path="/link1" component={componentName1}></Route>
    <Route path="/link2" component={componentName2}></Route>
    <Redirect to="link1" />
</Switch>

withRouter

为了让普通组件也具有路由组件的功能，使用方式和要求就和路由组件一样了。

class Nav extends React.Component{
    render() {
        return (
            <div className={'nav'}>
                这是一个组件
            </div>
        );
    }
}
// 导出的是 withRouter(Nav) 函数执行
export default withRouter(Nav)