一、安装和导入
1、安装
npm install react-router-dom —save
react-router——路由核心功能
react-router-dom——基于react-router，加入了一些在浏览器运行下的功能
2、基本用法：
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDom.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
3、两种方式：
（1）BrowserRouter：基于history对象进行路由控制
地址：http://www.abc.com/article/a1
（2）hashRouter：使用锚点技术，在url中加#作为路由，推荐使用。
地址：http://www.abc.com/#/article/a1
二、Route匹配的三种方式
1、Route组件：
（1）定义了匹配方式——比较path属性和当前地址的pathname。当url匹配成功时渲染响应组件内容，不匹配就渲染null。
import React from 'react';
import { Route } from 'react-router-dom';
class App extends Component {
render(){
return (
<div>
<Route path="/products" component={Products} />
<Route path="/admin" component={Admin} />
<Route path="/" component={Home} />
</div>
)
}
}
但是这样，home组件会被渲染到所有页面上。怎么解决呢？
有两个办法，一是使用exact标记进行完全匹配，<Route path="/" exact component={Home} />；二是使用Switch。
2、Switch：
将<Route>组件包裹在<Switch>组件中，Switch会遍历其所有子<Route>元素，并且仅渲染与当前地址匹配的第一个元素。
import React from 'react';
import { Route } from 'react-router-dom';
class App extends Component {
render(){
return (
<Switch>
<Route path="/products" component={Products} />
<Route path="/admin" component={Admin} />
<Route path="/" component={Home} />
</Switch>
)
}
}
3、Link：
使用<Link>作为url的导航，让整个应用在不同网址间切换并且不刷新页面。
操作方法：引入Link组件，将a改为Link，属性href改为to。
import React from 'react';
import { Link } from 'react-router-dom';
const NavBar = ()=>{
return (
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/products">Products</Link>
</li>
</ul>
)
};
export default NavBar;
二、react的三个props
※ history对象会使用浏览器的history对象，可以在不同历史记录中导航；
※ location对象代表目前应用的地址，注意其中的pathname属性哦；
※ match对象包含如何去匹配url信息，如isExact，params，path，url等。
1、props传递：
可以通过传入render里面的匿名函数的形式代入对应的组件，并且可以自定义props。
如果要注入默认的history、location、match三个props，可以使用解构的方式。
<Route path="/products" render={(props)=><Products groupId="99" {...props} />}></Route>
2、获取route参数：
使用冒号定义参数，然后传入需要渲染的子组件，在子组件中可以使用this.props.match.params找到对应的参数。
<Route path="/products/:id component={proDetails} />
// proDetail
render(){
return (
<div>
<h1>Product--{this.props.match.params.id}</h1>
</div>
)
}
3、重定向功能：
使用redirect组件
<Route path="/not-found" component={NotFound} />
<Redirect to="/not-found" />
// 也可以从某个 重定向到
<Redirect from="mall" to="/products" />
4、导航处理：
history.push或history.replace
import React, {Component} from "react";
class ProDetail extends Component {
handSave = ()=>{
this.props.history.push('/products')
};
render(){
return (
<button onClick={this.handSave}>save</button>
)
}
}
export default ProDetail;
总结：
1、使用react-router-dom的第三方库做react路由。react-router-dom依赖于react-router，并且提供了浏览器端的一些方法。
2、browser-router和hash-router的区别：browser-router基于history对象，hash-router基于锚点。
3、route组件：url匹配时渲染响应组件，完全匹配需要使用exact；switch组件可以将route元素包裹起来，仅渲染与当前地址匹配的第一个元素。
4、route props：使用render props方法向子组件传递props，react-router也会自动注入三个props。
5、route参数：在path中定义参数格式，在props match对象中获取参数。
6、Query string：使用第三方插件获得url中的参数，原理是解析url中location的search字段。
7、导航处理：push或replace处理浏览器历史导航。
网友评论