React实战篇——一、React Router基本用法

一、React Router基本用法

1，路由器

React Router通过Router和Route两个组件完成路由功能。Router可以理解为路由器，一个应用中只有一个Router实例，所有路由配置组件Route都定义为Router的子组件。在Web应用中，我们一般会使用对Router进行包装的BrowserRouter或HashRouter两个组件。BrowserRouter使用HTML5的history API(pushState、replaceState等)实现应用的UI和URL的同步。HashRouter使用URL的hash实现应用的UI和URL同步。

BrowserRouter创建的URL形式如下：

http://xxx.com/some/path

HashRouter创建的URL形式如下：

http://xxx.com/#/some/path

2，路由配置

Route是React Router中用于配置路由信息的组件，也是使用频率最高的组件。每当有一个组件需要根据URL决定是否渲染时，就需要创建一个Route。

　　①path

　　BrowserRouter时，path用来描述这个Route匹配的URL的pathname。例如：<Route path="/foo" />会匹配一个pathname为foo开始的URL。

　　HashRouter时，path用来描述这个Route匹配的URL的hash。

　　②match

　　当URL和Route匹配时，Route会创建一个match对象作为props的一个属性传递给被渲染的组件。这个对象包含四个属性：

• params：Route的path可以包含参数，例如：<Route path='"/foo/:id">包含一个参数id，URL为http://example.com/foo/1时，params={id:1}。
• isExact：当URL完全匹配时，值为true，当URL部分匹配时，值为false。例如path="/foo"，URL为http://example.com/foo时是完全匹配，URL为http://example.com/foo/1时是部分匹配。
• path：Route的path属性，构建嵌套路由时会用到。
• url：url的匹配部分。

　　③Route渲染组件的方式

　　Route提供了三个属性，用于定义待渲染的组件：

• component：是一个组件，当URL和Route匹配时，component属性定义的组件就会被渲染。

<Route path='foo' component={Foo}>

　　当URL为http://example.com/foo时，Foo被渲染。

• render：这个函数返回一个React元素。这种方式可以方便地为待渲染的组件传递额外的属性。

<Route path="/foo" render={(props) => (
    <Foo {...props} data={extraProps} />
)}>

　　Foo接收了一个额外的data属性

• children：函数返回要渲染的React元素。与前两种不同的是，无论是否匹配成功，children返回的组件都会被渲染。但是，当匹配不成功时，match属性为null。例如：

<Route path="foo" children={(props) => (
    <div className={props.match ? 'active' : ''}>
        <Foo />
    </div>
)}

　　如果Route匹配当前URL，待渲染元素的根节点div的class被设置成active

　　④Switch和exact

　　当URL和多个Route匹配时，这些Route都会执行渲染操作。

　　如果只想让第一个匹配的Route渲染，那么可以把这些Route包到一个Switch组件中。

　　如果想让URL和Route完全匹配时，Route才渲染，那么可以使用Route的exact属性。

　　Switch和exact常常联合使用，用于应用首页的导航。例如：

<Router>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/posts" component={Posts} />
        <Route path="/:user" component={User} />
    </Switch>
</Router>

• 如果不使用switch，当path为'/posts'时，path="/posts"和path="/:user"都会被匹配。
• 如果不使用exact，"/"和"/posts"、"/:user"等几乎所有的URL都会匹配第一个Route，又因为Switch的存在，后面的两个Route永远也不会被匹配。

　　⑤嵌套路由

　　指在Route渲染的组件内部定义新的Route。例如，在上一个例子中，在Posts组件内再定义两个Route

const Posts = ({match}) => {
    return (
        <div>
            {/* 这里match.url等于/posts */}
            <Route path={`${match.url}/:id`} component={PostDetail} />
            <Route exact path={`${match.url}`} component={PostList} />
        </div>
    )
}

　　当URL的pathname为"/posts/react"时，PostDetail被渲染；当URL的pathname为"/posts"时，PostList被渲染。

3，链接

　　一个Link组件定义了当点击该Link时，页面该如何路由：

const Navigation = () => {
    return (
        <header>
            <nav>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/posts'>Posts</Link></li>
                </ul>
            </nav>
        </header>
    )
}

　　to属性声明要导航到的URL地址。to可以是字符串，也可以是object类型，当to为object类型时，可以包含pathname、search、hash、state四个属性：

            <Link to={{
                pathname: '/posts',
                search: '?sort=name',
                hash: '#the-hash',
                state: {fromHome: true},
            }}/>

　　除了Link，还可以使用history对象手动实现导航。history中最常用的两个方法是push(path,[state])和replace(path,[state])，push会向浏览历史记录中新增一条记录，replace会用新纪录替换当前记录：

history.push('/posts')
history.replace('/posts')