本人小白一枚,最近在学习React,今天学习路由所以就做着中文笔记了,可能下面有许多错误或者语句不通顺,欢迎大家指出,原文出自这里,在github里面就可以看见英文版的了(大家也可以去官网看文档,上面也有相对应的例子)
<BrowserRouter>
<Router>使用html5的history api来保持ui和url同步。

BrowserRouter有如下属性:
basename:string
这是所有位置的底层url。使用他则子目录会自动嵌入父级目录。

getUserConfirmation:func
一个用来确定导航的方法。默认使用window.confirm。

forceRefresh:bool
如果是true,路由器将使用全页刷新来进行页面导航。你可能只想浏览器仅仅支持html5的历史api。

keyLength:number
location.key的长度。默认到6。

children:node
渲染一个子元素。
<HashRouter>
<Router>使用url的hash(i.e.window.location.hash)来保持ui和url同步。
重点:hash history不支持location.key或者location.state。在旧版本中,我们希望依赖行为但出现了我们解决不了的难题。任何需要该行为的代码和插件都运行不了。因为这个技术仅仅面向于旧版本的浏览器,所以我们建议你使用<BrowserHistory>。

basename:string
和BrowserRouter的basename属性使用一样。不过不同的是产生的根目录会有#

getUserConfirmation:func
一个用来确定导航的方法。默认使用window.confirm。

hashType:string
要使用的编码类型是window.location.hash.有效值,如:
1.“slash”-创建hashes,如: #/ 和 #/sunshine/lollipops
2."noslash"-创建hashes,如:#/ 和 #sunshine/lollipops
3."hashbang"-创建"ajax crawlable"(Google反对使用)hases,如:#/ 和 #!/sunshine/lollipops
默认是slash
children:node
渲染单个子元素
<Link>
在应用中,提供可声明可访问的导航。
to:string
表示链接位置,通过连接location的pathname,seach,hash属性创建出来。

to:object
该对象可以有下面任一个属性:
1.pathname:代表链接地址
2.search:代表查询参数
3.hash:放入url的hash,如:'#a-hash'
4.state:坚持到当前位置的状态

replace:bool
当ture时,只要点击链接,历史堆栈中的第一位将会被代替,而不是在其上面再加一个新地址。

innerRef:func
允许访问组件内部。(?????这里不知道是不是这样意思,囧)

<Router>
所有路由组件的公共低层接口。典型的应用将其中一个高级路由器来代替,如下:
1.<BrowserRouter>
2.<HashRouter>
3.<MemoryRouter>
4.<NativeRouter>
5.<StaticRouter>
大多数使用<Router>的情况是为了使用户历史和状态管理库同步,如:Redux或者Mobx。注意:这不要求跟着React Router使用状态管理库,它只是利于深层整合。

history:object
一个用来导航的对象history。

children:node
渲染单个子元素

网友评论