react-router-dom
- 安装
- cnpm i react-router-dom --save
- HashRouter和BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter, HashRouter, Router } from 'react-router-dom';
function home(){
return <h2>Home Page</h2>
}
ReactDOM.render(
// hashRouter
<HashRouter>
<Route path="/" component={home}></Route>
</HashRouter>
//browserRouter
<BrowserRouter basename="/calendar">
<Route path="/" component={home}></Route>
</BrowserRouter>
//basename如果文件放在服务器的二级目录下则可以使用,当主页前面有一级目录calendar时,同样会显示主页的内容,通常配合Link使用
,document.getElementById('root')
);
registerServiceWorker();
- Route
- Route是路由的一个原材料,它是控制路径对应显示的组件。通常使用exact、path以及component属性
-
<Route exact path='/' component={home}></Route>
,exact控制匹配到/路径时不会再继续向下匹配,path标识路由的路径,component表示路径对应显示的组件
- Line和NavLink
- 二者都可以控制路由跳转,不同点是NavLink的api更多
- Line
- 主要api是to,to可以接收string或者object,来控制url
<link to='/courses'>
<link to={{
pathname:'/courses',
search:'?sort=name',
hash:'#the-hash',
state:{ fromDashboard:true }
}}
ReactDOM.render(
<BrowserRouter basename="/calendar">
<div>
<div>
<ul>
<li>
<NavLink exact activeClassName='selected' to='/'>home</NavLink>
</li>
<li>
<NavLink activeClassName='selected' to='/second/1234'>second</NavLink>
</li>
<li>
<NavLink activeClassName='selected' to='/third'>third</NavLink>
</li>
</ul>
</div>
<Route exact path='/' component={Home}></Route>
<Route path='/second/:id' component={Second}></Route>
<Route path='/third' component={Third}></Route>
</div>
</BrowserRouter>,document.getElementById('root')
);
/*
>exact用于严格匹配,匹配到/则不会继续向下匹配
>to控制跳转的路径
>activeClassName是选中状态的类名,可以为其添加样式
>在/second后添加1234来路由中传递消息
*/
- match
- match是在使用router之后被放入props中的一个属性,在class创建的组件中通过
this.props.match
来获取match中的信息
-
this.props.match
中存在params(对象中具有id属性),path,url等字段
- Switch
- Switch包裹Route,里面不能放其他元素,用来只显示一个路由