目录
1、路由（Router）
1.1、路由模式
1.1.1、BrowserRouter
1.1.2、HashRouter
1.2、声明式路由导航
1.2.1、Link
1.2.3、模糊匹配
1.2.4、多级路由
1.3、高阶组件
1.3.1、withRouter
1.4、路由进阶
1.4.1、监控路由变化
1.4.2、编程式导航
1.4.3、路由传参
1、路由（Router）
根据 url 的不同来切换对应的组件，实现 spa（单页面应用）在页面切换的时候不会刷新，更加接近原生体验。
1.1、路由模式
1.1.1、BrowserRouter
历史记录模式，没有#号，他是通过历史记录 api 来进行路由切换的，刷新会丢失，本地不会。
先在主页（index.js）中导入路由，由路由模式包裹根组件。
代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowsweRouter} from "react-router-dom"
ReactDOM.render(<BrowsweRouter><App /></BrowsweRouter>,document.getElementById('root')
);
serviceWorker.unregister();在 App.js 中使用路由。
代码如下：
function App() {return (<div className="App"><Route path="/home" component={Home}/><Route path="/user" component={User}/></div>);
}
export default App;1.1.2、HashRouter
hash 模式，带#号，刷新的时候页面不会丢失。只需要将导入的 BrowserRouter 修改为 BrowserRouter 即可。
1.2、声明式路由导航
1.2.1、Link
当使用路由时不可能让用户自己到地址栏中去输入地址，因此使用点击链接的方式。
代码如下：
function App() {return (<div className="App"><div><Link to="/home">点我去home</Link><Link to="/user">点我去user</Link></div><Route path="/home" component={Home}/><Route path="/user" component={User}/></div>);
}
export default App;
1.2.2、NavLink
和 Link 的用法一致，但会在组件中增加 class="active"，而后可以自行对该 class 进行编辑，达到点击后样式的控制。
代码如下：
function App() {return (<div className="App"><div><NavLink to="/home">点我去home</NavLink><NavLink to="/user">点我去user</NavLink></div><Route path="/home" component={Home}/><Route path="/user" component={User}/></div>);
}
export default App;1.2.3、模糊匹配
路由规则本质上是进行选择匹配，当匹配到多个时也就会显示多个，当设置 path 为 / 时，任意路径都能匹配，点击任意路径都会同时显示 / 所指向内容，如果加入 exact 属性，则会进行精准匹配，只会当路径为 / 时才会匹配。
代码如下：
function App() {return (<div className="App"><div><Link to="/home">点我去home</Link><Link to="/user">点我去user</Link></div><Route path="/" exact component={Home}/><Route path="/home" component={Home}/><Route path="/user" component={User}/></div>);
}
export default App;
当设置两个相同的路由时会多次渲染，为了避免这种问题，可以引用 switch。
代码如下：
function App() {return (<div className="App"><div><Link to="/home">点我去home</Link><Link to="/user">点我去user</Link></div><Switch><Route path="/" exact component={Home}/><Route path="/home" component={Home}/><Route path="/user" component={User}/></Switch></div>);
}
export default App;
1.2.4、多级路由
在路由跳转后的页面再加一个路由即可实现多级路由，再次点击可新增渲染。
1.3、高阶组件
参数是一个组件，返回的也是一个组件。
1.3.1、withRouter
让不是路由切换的组件具备路由切换组件的三个属性（location match history）。
代码如下：
function App(props) {console.log(props)return (<div className="App"><div><Link to="/home">点我去home</Link><Link to="/user">点我去user</Link></div><Switch><Route path="/home" component={Home}/><Route path="/home" component={Home}/><Route path="/user" component={User}/><Redirect from="/" to="/home" exact></Redirect></Switch></div>);
}
export default withRouter(App);
1.4、路由进阶
1.4.1、监控路由变化
代码如下：
function App(props) {props.history.listen((link)=>{console.log(link)})return (<div className="App"><div><Link to="/home">点我去home</Link><Link to="/user">点我去user</Link></div><Switch><Route path="/home" component={Home}/><Route path="/home" component={Home}/><Route path="/user" component={User}/><Redirect from="/" to="/home" exact></Redirect></Switch></div>);
}
export default withRouter(App);1.4.2、编程式导航
代码如下：
function App(props) {props.history.listen((link)=>{console.log(link)})return (<div className="App"><button onClick={()=>{props.history.push("/home")}}>点我去home</button></div>);
}
export default withRouter(App);
1.4.3、路由传参
params 方式进行传参
- 需要在路由规则中设置传递的接受参数
- 发送参数，直接在跳转路径后进行编写
- 接受props.match.params.参数名
优势：刷新地址，参数依然存在
缺点：只能传递字符串，并且参数过多时url会变得丑陋。
代码如下：
function App(props) {props.history.listen((link)=>{console.log(link)})return (<div className="App"><div><Link to="/home/我是参数">点我去home</Link><Link to="/user">点我去user</Link></div><Switch><Route path="/home/:id" component={Home}/><Route path="/user" component={User}/><Redirect from="/" to="/home" exact></Redirect></Switch></div>);
}
export default withRouter(App);
而后在 Home.js 中接受参数即可。
代码如下：
export default class Home extends Component{componentDidMount(){console.log(this.props.match.params.id)}
}query 方式进行传参
- 不需要在路由规则中进行传递参数的配置
- 直接发送数据
- 使用 this.props.location.query.xxx
代码如下：
function App(props) {props.history.listen((link)=>{console.log(link)})return (<div className="App"><div><Link to={
{pathname:"/user",query:{name:"小明"}}}>点我去user</Link></div><Route path="/user" component={User}/></div>);
}
export default withRouter(App);
而后在 User.js 中接受参数即可。
代码如下：
export default class Phone extends Component{componentDidMount(){console.log(this.props.location.query.name)}
}