脚本宝典收集整理的这篇文章主要介绍了react router v4 简介，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

最近使用react router 遇到一个问题：当对某个路由添加参数的时候/list/:app 这列路由，点击这个路由以后再点击其他路由，location地址就追加到后面，问不是replace.

/list/:app => /list/appName

切换到/info 就变成了/list/appName/info
@H_406_22@
最后通过定位，发觉是在Link的时候对Link的to没有添加绝对地址的原因。

      

      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 要修改为
" title="" data-original-title="复制">
      
      
<Link to="list/appName" /> 要修改为<Link to="/list/appName" />

在定位这个问题的时候，看了一下各个部分的源代码，下面对react router v4做一个简单的介绍。
分别从route, history, location, match 做介绍。
route
1、route 三种render方式：component, render, function
2、route的PRops: match, location, history
3、router的path当不指定path的时候就会一直匹配
route path 匹配写法:

      

      
      
      
      
  <Route path='tasks_list/:app/:jobId' component={component} />

如果params 是可选的写法：

      

      
      
      
      
<Route path='tasks_list/:app/:jobId?' component={component} />

history
history 是一个路由中最重要的部分，一般来说用户只有两种方式会更新当前 URL。一种是用户点击了某个锚标签或者直接操作 history 对象的 replace/push 方法；另一种是用户点击前进/后退按钮。无论哪一种方式都要求我们的路由系统能够实时监听 URL 的变化，并且在 URL 发生变化时及时地做出响应，渲染出正确的页面。我们首先来考虑下如何处理用户点击前进/后退按钮。React Router 使用 History 的 .listen 方法来监听当前 URL 的变化，其本质上还是直接监听 HTML5 的 popstate 事件。
当监听到 popstate 事件被触发时，我们会调用 forceUpdate 函数来强制进行重渲染。总结而言，无论我们在系统中设置了多少的路由组件，它们都会独立地监听 popstate 事件并且相应地执行重渲染操作。接下来我们继续讨论 matchPath 这个 Route 组件中至关重要的函数，它负责决定当前路由组件的 path 参数是否与当前 URL 相一致。
react router 的history 是调用了ReactTraining的history
react router 的history有以下属性与方法：

length - (number) The number of entries in the history stack
action - (string) The current action (PUSH, REPLACE, or POP)
location - (object) The current location. May have the following properties:

1） pathname - (string) The path of the URL
2）seArch - (string) The URL query string
3）hash - (string) The URL hash fragment
4）state - (string) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. Only available in browser and memory history.

      

      
      
      
      
 1）push(path, [state]) - (function) Pushes a new entry onto the history stack
2）replace(path, [state]) - (function) Replaces the current entry on the history stack    
3）go(n) - (function) Moves the pointer in the history stack by n entries
4）goBack() - (function) Equivalent to go(-1)    
5）goForward() - (function) Equivalent to go(1)
6）block(prompt) - (function) Prevents navigation (see the history docs)

location
location指定当前的app在哪儿
Route component as this.props.location
Route render as ({ location }) => ()
Route children as ({ location }) => ()
withrouter as this.props.location
比如上面遇到的问题，就是location的问题，最后定位到是createLocation的方法出的问题。
match
有了location, 然后有了route, match包含的信息就是 <Route path>如何匹配当前的location

params - (object) Key/value pairs parsed From the URL corresponding to the dynamic segments of the path
isExact - (boolean) true if the entire URL was matched (no trailing characters)
path - (string) The path pattern used to match. Useful for building nested <Route>s
url - (string) The matched portion of the URL. Useful for building nested <Link>

redirect
这个组件并没有真实地进行界面渲染，而是仅仅进行了简单的跳转操作
脚本宝典总结
       
以上是脚本宝典为你收集整理的react router v4 简介全部内容，希望文章能够帮你解决react router v4 简介所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。