React-Router-v4中的一些重要API

Veröffentlicht am

上一章我们了解了一个RR4很重要的组件，今天还会介绍另外一个很重要的组件

Router

Router是RR4中最重要的组件，必须理解，学会使用，他最基本的职责是当页面的访问地址与Route的path匹配时，就渲染出相对应的UI界面。

自带三个render method和三个props。

三个render method

每种render mothod都有不同的应用场景，同一个应该只有一种render method，大部分情况下你讲使用component。

  • 三个props

    所有的render mothod都将传入这些props
  • match
  • location
  • history

component

只有当访问地址和路由匹配时，一个React component才会被渲染，此时组件接受router props(match,location,history)
当使用component时，router将使用React.createElement，根据给定的component创建一个全新的React，这意味着如果你使用内联(linefunction)传值给component将会产生不必要的重复装载，对于内联渲染(inline rendering)建议使用render prop。

1
2
3
4
<Route path='/user/:username' component={user}/>
	const user = ({macth}) => {
		return <h1>hello {match.params.username}!</h1>
	}

render:func

此方法适用于内联渲染，而且不会产生上文说的重复装载。

1
2
3
4
5
6
7
8
9
10
11
//内联渲染
<Route path='/home' render={()=><h1>Home</h1>}/>
//包装组合
const FaddingRoute = ({component:component,...rest}) => (
 <Route {...rest}  render={ props => (
  <FadeIn>
  	<Component {...prop} />
  </FadeIn>
 )}/>
)
<FadingRoute path='/cool' component={something} />

children:func

有时候你可能只想知道访问地址是否被匹配，然后改变下别的东西，而不仅仅是对应的页面

1
2
3
4
5
6
7
8
9
10
11
<ul>
 <listItemLink to='/somewhere' />
 <listItemLink to='/somewhere-ele'/>
</ul>
const linkItemLink = ({to,...rest}) => (
 <Route path={to} children={{match} => (
  <li className={match?'active':''}>
  	<Link to={to} {...rest}/>
  </li>
 )}
)

path:string

任何可以被path-to-regexp解析的有效URL路径。
<Route path='/users/:id' component={User} />
如果不给path那么路由将总是匹配

  • exact:bool
    如果为true，path为’/one’的路由将不能匹配’/one/two’，反之亦然。
  • strict:bool
    表示对路径末尾斜杠的匹配，如果为true，path为’/one/‘将不能匹配’/one’，但可以匹配’/one/two’
    如果要确保路由没有末尾斜杠，那么strict和ecact都必须同时为true。