React Router4.0

栏目: 服务器 · 发布时间: 5年前

内容简介:使用BrowserRouter时,一般还需要对服务器进行配置,让服务器能正确处理所有可能的URL.例如,当浏览器发送(1)当使用BrowserRouter时,path用来描述这个Route匹配的URL的pathname(2)当使用HashRouter时,path用来描述这个Route匹配的URL的hash.

React Router v4是对React Router的一次彻底重构,采用动态路由,遵循React中一切皆组件的思想,每一个Route(路由)都是一个普通的React组件。

BrowserRouter创建的URL形式如下:

http://react.com/some/path

HashRouter创建的URL形式如下:

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

使用BrowserRouter时,一般还需要对服务器进行配置,让服务器能正确处理所有可能的URL.例如,当浏览器发送 http://react.com/some/pathhttp://react.com/some/path2两... ,服务器能够返回正确的HTML页面(也就是单页面应用中唯一的html页面).使用HashRouter则不存在这个问题,因为hash部分的内容会被服务器自动忽略,真正有效的是hash前面的部分,而对于单页面应用来说,这部分内容是固定的。

路由的配置

1.path

(1)当使用BrowserRouter时,path用来描述这个Route匹配的URL的pathname

(2)当使用HashRouter时,path用来描述这个Route匹配的URL的hash.

2.match

(1) params: Route的path可以包含参数,例如:<Route path='/foo/:id'> 包含一个参数id。params就是用于从匹配的URL中解析出path中的参数,例如:当URL="http://react.com/foo/1时,params={id:1}。

(2) isExact: 是一个布尔值,当URL完全匹配时,值为true;当URL部分匹配时,值为false.例如:当path="/foo",URL="http://react.com/foo"时,是完全匹配;当URL="http://react.com/foo/1时,是部分匹配。

(3) path: Route的path属性,构建嵌套路由时会使用到。

(4) url: URL的匹配部分。

3.Route渲染组件的方式

(1)component

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

<Route path='/foo' component={FOO}>

当URL="http://react.com/foo"时,Foo组件会被渲染。

(2)render

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

例如:

<Route path='/foo' render={(props)=>(

<Foo {...props} data={extraProps} />

)}>

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

(3)children children的值也是一个函数,函数返回要渲染的React元素。与之前两种方式不同的是,无论是否匹配成功,children返回的组件都将会被渲染。但是当匹配不成功时,match属性为null。例如:

<Route path='/foo' children={(props)=>(

<div className={props.match?'active':''}>
    <Foo />
</div>

)} />

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

4.Switch和exact

当URL和多个Route匹配时,这些Route都会执行渲染操作。如果只想让第一个匹配的Router渲染,那么可以把这些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,当URL的pathname为"/posts"时,<Route path='/posts'/>和<Route path='/:user' />都会被匹配。

如果不使用exact,"/" "/posts" "/user1"等几乎所有URL都会匹配第一个Route,又因为Switch的存在,后面的两个Route永远也不会被匹配。使用exact,保证只有当URL的pathname为"/"时,第一个Route才会被匹配。

5.嵌套路由

嵌套路由是指在Route渲染的组件内部定义新的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组件会被渲染。Route的嵌套使用让应用可以更加灵活的使用路由。

6.链接

Link是React Router提供的链接组件,一个Link组件定义了当点击该Link时,页面应该如何路由:

例如:

const Navigation = () => (

<header>
    <nav>
        <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/posts'>Posts</Link></li>
        </ul>
    </nav>
</header>

)

Link使用to属性声明要导航到URL地址。to可以是string或object类型,当to为object类型时,可以包含pathname、search、hash、state、四个属性,例如:

<Link to={{

pathname:'/posts',
search:'?sort=name',
hash:'#the-hash",
state:{formHome:true}

}}/>

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

history.push('/posts')

history.replace('/posts')

import React from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function BasicExample() {

return (

<Router>
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>

    <hr />

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
  </div>
</Router>

);

}

function Home() {

return (

<div>
  <h2>Home</h2>
</div>

);

}

function About() {

return (

<div>
  <h2>About</h2>
</div>

);

}

function Topics({ match }) {

return (

<div>
  <h2>Topics</h2>
  <ul>
    <li>
      <Link to={`${match.url}/rendering`}>Rendering with React</Link>
    </li>
    <li>
      <Link to={`${match.url}/components`}>Components</Link>
    </li>
    <li>
      <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
    </li>
  </ul>

  <Route path={`${match.path}/:topicId`} component={Topic} />
  <Route
    exact
    path={match.path}
    render={() => <h3>Please select a topic.</h3>}
  />
</div>

);

}

function Topic({ match }) {

return (

<div>
  <h3>{match.params.topicId}</h3>
</div>

);

}

export default BasicExample;


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创新者的窘境

创新者的窘境

克莱顿•克里斯坦森( Clayton M. Christensen ) / 胡建桥 / 中信出版社 / 2010-6 / 38.00元

管理类经典图书 o 被《福布斯》评为20世纪最具影响的20本商业图书之一 o “全球商业书籍奖”获奖图书 “颠覆大师”克莱顿•克里斯坦森经典力作。 《金融时报》/布兹•亚兰及汉密顿全球商务书刊颁发“1997年最佳商务书”奖 “1997年最佳商务‘实用’书”奖 一本书, 让志在必得者战战兢兢, 让犹豫不前者胸有成竹, 掀起激荡决策者的脑力风暴, ......一起来看看 《创新者的窘境》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具