Router当然是在React项目中使用的

转自Kindem的博客

React
Router是React的四个配套零件,正如其名,它是贰个前端路由器。无人不晓,不荒谬的UGL450L深入分析,而且再次来到相应的页面,应该是后端服务器的事务,可是,借使使用React了,就意味着前后端的分离,并且React
Build出来的公文,到头来其实就只有叁个index.html、二个js文件、一个css文件而已,这一个index.html就承载了总体站点的剧情,从那么些UTucsonL跳转到其余三个U奇骏L,对React来讲,就只是组件的的重新渲染而已,并非后端跳转。

就此React
Router,其实效果正是依赖提交UGTC4LussoL的例外,渲染出区别的机件,只在前端落成,却能让页面装作后端跳转的样板。

React
Router当然是在React项目中动用的,假设还一向不创设React项目,能够采纳照片墙(Instagram)官方的create-react-app快速建设构造多个React项目,使用格局能够参考此前的博文:使用create-react-app来创建react项目

在品种确立好未来,就动用npm只怕yarn安装react-router吧:

// npm使用这条npm install react-router-dom --save// yarn使用这条yarn add react-router-dom

随之大家能够把/src目录下的享有文件删除,因为我们历来就没有须要采用它私下认可给的类型结构,大家遵照自个儿的就好。接下将/public目录下的index.html修改一下,顺便在/src下新建多少个index.js,留空备用

// /public/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>React Router Test</title></head><body> <div ></div></body></html>

BrowserRouter和HashRouter那七个零部件是路由器的最外层组件,全体的路由器子组件都应有被打包在BrowserRouter和HashRouter中,这两侧基本临近,分歧在于BrowserRouter还帮忙后端跳转,而一旦您的站点只供给出示静态文件,HashRouter会是很好的选料,不过为了维持项指标可扩展性,大家进一步偏侧于暗许使用BrowserRouter来创立路由器。

Route则是用来说述U福睿斯L和零部件对应提到的子组件,大家接纳Route组件来在路由器中开创U科雷傲L和UI组件的相应关系。

上边给三个最简便易行的选拔例子,修改index.js:

// /index.jsimport React from 'react';import ReactDom from 'react-dom';import { BrowserRouter, Route } from 'react-router-dom';class Index extends React.Component { render() { return ( <h1>Hello World!</h1> ); }}class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Route exact path={'/'} component={Index}/> </BrowserRouter> ); }}ReactDom.render( <MainRouter/>, document.getElementById;

这一段的意趣就是,定义三个路由器组件MainRouter,它承担整个站点的路由,它会渲染贰个BrowserRouter,在那之中定义了一条准则,借使UEvoqueL完全相配路线/,那么就渲染Index组件,渲染出来的结果本来是一个Hello
World。

也正是说,在建站的时候,我们只须要把每一个网页的大组件写好,然后采纳Route为每二个大页面组件成立二个U福特ExplorerL的应和法则,就行了。

贰个杰出的Route长那样:

<Route exact path={'/location/location2'} component={ComponentName}>

中间path是您要合营的U路虎极光L,component是当UENCOREL相称的时候,React应该渲染的零件,而exact,是可选的,指是还是不是须求完全相配path,若是该项不选的话,/location这一准绳也能匹配到/location/123这样的UENVISIONL

一个站点定义一条法规显著是相当不足的,可是纵然您品尝在三个BrowserRouter或然HashRouter中加多四个Route的话,它会给你报错,说一个Router中不得不分包一条Route。

缓和这一主题素材的主意正是在BrowserRouter和Route之间嵌套一层Switch,像这么:

<BrowserRouter> <Switch> <Route exact path={'/'} component={Index}/> <Route exact path={'/about'} component={About}/> </Switch></BrowserRouter>

可想而知,链接使用的是a标签,可是在React的前端世界中,使用a标签却不必然能让您达到内定地点,因为React页面包车型客车特殊性,React页面是以组件和渲染作为单位,并非实在存在的网页文件,那样的话,a标签或许不能发挥成效,再者a标签会导致页面包车型客车刷新,对于全体文本一齐装进的React来讲,那太伤了,代替他,在React的路由系统中,应该选择Link,像这么

<Link to={'/'}>jump to index</Link>

稍微情况,大家须要使用到U途达L传参,这在React
Router中也兼具对应的兑现格局,举一个例证:

// /index.jsimport React from 'react';import ReactDom from 'react-dom';import { BrowserRouter, Route } from 'react-router-dom';class Index extends React.Component { constructor() { super(); } render() { return ( <div> <h1>Hello, { this.props.match.params.name }</h1> </div> ); }}class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Route exact path={'/:name'} component={Index}/> </BrowserRouter> ); }}ReactDom.render( <MainRouter/>, document.getElementById;

假如在Route的path中动用:key的款式就足以将内容以props的款型传播被渲染的机件,并且在组件内部能够被以例子中的格局利用

学到这里,React
Router的着力用法就基本上了,基本能够满足普通撸前端的须要了,当然,React
Router还也有一点值得深究的风味,你能够直接参谋官方API来越来越尖锐地上学:React
Router

相关文章