react router

2018-08-06 本文已影响0人田野的海螺

react router干什么的？

react处理路由跳转用的，一般用于nav导航栏的页面切换使用

react router怎么用？

<BrowserRouter>组件

（1）basename是以当前为基准路由，具有层级结构的路由目录<BrowserRouter basename="/a"><Link to="/b"/></BrowserRouter>生成的路径微‘/a/b’

（2）forceRefresh，布尔型，是否会刷新

（3）getUserConfirmation：用于确认导航的函数，默认使用 window.confirm。例如，当从 /a 导航至 /b 时，会使用默认的 confirm 函数弹出一个提示，用户点击确定后才进行导航，否则不做任何处理。译注：需要配合 <Prompt>一起使用

（4）keyLength：location.key 的长度，默认为 6。

使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。(啥意思哈？？)

（1）参数和BrowserRouter组件类似（basename，getUserConfirmation）(啥意思哈？？和BrowserRouter区别呢？？)

（2）hashType

window.location.hash 使用的 hash 类型，有如下几种：

slash - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops

noslash - 后面没有斜杠，例如 # 和 #sunshine/lollipops

hashbang - Google 风格的 ajax crawlable，例如 #!/ 和 #!/sunshine/lollipops

默认为 slash。(啥意思哈？？和BrowserRouter区别呢？？)

以上着实有点懵逼，，主要是没用过，缺乏实战，之后再补充吧！！！

(Route)组件

是React Router中主要的结构单元。在任意位置只要匹配了URL的路径名(pathname)你就可以创建元素进行渲染。

（1）当路径名为'/'时, path不匹配

（2）会匹配以/roster开头的路径名

（3）匹配固定'/roster'时，用"exact"参数

（4）在匹配路由时，React Router只关注location的路径名

（5）创建多个Router组件，使用组件<Switch></Switch>包裹。Switch会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染。

（6）当一个路由的path匹配成功后，路由用来确定渲染结果的参数有三种：

<Route path='''' render={(props)=>(<Page {...props} data={extraProps} />)}

<Route path="" children={(props)=>(props.match?<Page {...props}/>:<Other {...props}/>)}

注释：

component ：一个React组件。当带有component参数的route匹配成功后，route会返回一个新的元素，其为component参数所对应的React组件（使用React.createElement创建）。

render ：一个返回React element的函数[注5]。当匹配成功后调用该函数。该过程与传入component参数类似，并且对于行级渲染与需要向元素传入额外参数的操作会更有用。

children ：一个返回React element的函数。与上述两个参数不同，无论route是否匹配当前location，其都会被渲染。

（7）路由上面带参数，如'/roster/:number'中:number这种写法意味着/roster/后的路径名将会被获取并存在match.params.number中。

link组件<Link to={{pathName:‘/roster/7’}}></Link>

（1）link 组件，使用'to'参数来描述需要定位的页面。它的值即可是字符串也可是location对象（包含pathname，search，hash与state属性）。如果其值为字符床将会被转换为location对象。