React Router被拆分成三个包:react-router
,react-router-dom
和react-router-native
。react-router
提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。
React-router
React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。
React-router-dom
React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。安装很简单npm i react-router-dom --save,安装了淘宝镜像的就用cnpm吧。
进行网站(将会运行在浏览器环境中)构建,我们应当安装react-router-dom
。react-router-dom
暴露出react-router
中暴露的对象与方法,因此你只需要安装并引用react-router-dom
即可。
npm install --save react-router-dom
路由器(Router)
在你开始项目前,你需要决定你使用的路由器的类型。对于网页项目,存在<BrowserRouter>
与<HashRouter>
两种组件。
<HashRouter>
通过hash值来对路由进行控制。如果你使用HashRouter,你的路由就会默认有这个#。
localhost:3000/#/
很多情况下我们则不是这种情况,我们不需要这个#,因为它看起来很怪,这时我们就需要用到<BrowserRouter>
。
它的原理是使用HTML5 history API (pushState, replaceState, popState)来使你的内容随着url动态改变的
当存在服务区来管理动态请求时,需要使用<BrowserRouter>组件,而<HashRouter>被用于静态网站。
通常,我们更倾向选择<BrowserRouter>,但如果你的网站仅用来呈现静态文件,那么<HashRouter>将会是一个好选择。
对于我们的项目,假设将会有服务器的动态支持,因此我们选择<BrowserRouter>作为路由器组件。
localhost:3000
Route
- Route是路由的一个原材料,它是控制路径对应显示的组件。我们经常用的是exact、path以及component属性。
<Route path='/roster'/>
// 当路径名为'/'时, path不匹配
// 当路径名为'/roster'或'/roster/2'时, path匹配
// 当你只想匹配'/roster'时,你需要使用"exact"参数
// 则路由仅匹配'/roster'而不会匹配'/roster/2'
<Route exact path='/roster'/>
exact控制匹配到/路径时不会再继续向下匹配,path标识路由的路径,component表示路径对应显示的组件。后面我们将结合NavLink完成一个很基本的路由使用。同时我们可以设置例如/second/:id的方式来控制页面的显示,这需要配合Link或者NavLink配合使用。下面我们会提到
-
<Route>是如何渲染的?
当一个路由的path匹配成功后,路由用来确定渲染结果的参数有三种。只需要提供其中一个即可。
-
component : 一个React组件。当带有component参数的route匹配成功后,route会返回一个新的元素,其为component参数所对应的React组件(使用React.createElement创建)。
-
render : 一个返回React element的函数[注5]。当匹配成功后调用该函数。该过程与传入component参数类似,并且对于行级渲染与需要向元素传入额外参数的操作会更有用。
-
children : 一个返回React element的函数。与上述两个参数不同,无论route是否匹配当前location,其都会被渲染。
<Route path='/page' component={Page} />
const extraProps = { color: 'red' }
<Route path='/page' render={(props) => (
<Page {...props} data={extraProps}/>
)}/>
<Route path='/page' children={(props) => (
props.match
? <Page {...props}/>
: <EmptyPage {...props}/>
)}/>
通常component
参数与render
参数被更经常地使用。children
参数偶尔会被使用,它更常用在path无法匹配时呈现的'空'状态
Link和NavLink的选择
两者都是可以控制路由跳转的,不同点是NavLink的api更多,更加满足你的需求。
Link
主要api是to,to可以接受string或者一个object,来控制url。使用方法如下
这时点击Link就会跳转到courses。