引入依赖包
npm install react-router-dom react-router-config --save
- react-router是路由的核心库，包含Router组件等
- react-router-dom 当在浏览器中使用react-router时，引入该依赖。
该依赖包是绑定了DOM的react-router，比react-router多出了<Link><BrowserRouter>等DOM类组件，因此引入了此包后就不用再引入react-router - react-router-config 是 react-router的一个插件，能够实现集中式路由配置
各个组件含义
- <Router> 想要在页面中用路由导航到其他页面，需要在所有组件的最外层套上<BrowserRouter>或<HashRouter>作为容器
- <Route> 路由渲染，即展示跳转后的路由，他有许多属性
- path="/" 页面的路径
- render: () => (
<Redirect to={"/recommend"}/>
)
path路径下渲染的内容 - component=“Recommend” path路径下渲染的组件
- exact: true 严格匹配，只有当路径刚好为"/“时才匹配。默认为false时，”/recommend"也会匹配"/"路径
每个<Route>对应的路由组件默认会收到三个参数分别是history、location和match
- <Link> 路由跳转。其实就是实现了<a>标签，但是取消了a标签的默认跳转操作，只改变了url。<Link>中的to属性为跳转到的路径，相当于a标签中的href
- <NavLink> <Link>标签是没有高亮效果的，导航栏在不同页面想要有高亮效果activeClassName，需使用NavLink标签
- IndexRoute 设置一个默认页面
路由的模糊匹配
假如有<Link path='/home/a/b'>Home</Link>
对应的<Route path='/home' component={Home}>
<Link>中路由范围较为精确，<Route>中路由范围更宽泛，会导致模糊匹配，该<Route>会展示’/home/a/b’的内容。
默认情况下路由会模糊匹配，要想精准匹配想要跳转的链接，可加上‘exact’属性
<Route exact={true} path='/home' component={Home}>该<Route>只能渲染正好为’\home’的path
给路由组件传参
- params
<Link path={`/home/${myparams1}/${myparms2}`}>Home</Link> 携带参数
<Route path=’/home/:myparams1/:myparams2’ component={Home}> 声明接收
在Home组件中this.props.match.params可得到参数对象 - search
<Link path={`/home?myparams1=${myparams1}&myparams2=${myparms2}`}>Home</Link> 携带参数
在Home组件中this.props.location.search形式为"?myparams1=1&myparams2=2"
对于search的这种urlEncoded形式，引入querystring库对其解码得到参数对象
import qs from querystring
qs.parse(this.props.location.search.slice(1)) - state
前两种参数传递方式都会在url中显式携带参数，state方式则不会
<Link>中to是一个对象，参数放在state对象中，
<Link to={{pathname:‘home’, state:{myparams1:myparams1, myparams2:myparams2}}}>Home</Link>
在Home组件中this.props.location.state || {}取得参数对象
withRouter
withRouter可以让一般组件拥有路由组件特有API，如history、location等，返回值为一个新组件
import {withRouter} from 'react-router-dom'
class Header extends Component {
……
}
export default withRouter(Header)
|