React Router4.0

kuangcaibao 发布于2019-08-26 13:31 / 1675人阅读

摘要：的值是一个函数，这个函数返回一个元素，这个函数返回一个元素。这种方式可以很方便的为待渲染的组件传递额外的属性。与之前两种方式不同的是，无论是否匹配成功，返回的组件都将会被渲染。使用保证只有当的为时，第一个才会被匹配。

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/path 和 http://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可以包含参数，例如：包含一个参数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属性定义的组件就会被渲染。

当URL="http://react.com/foo"时，Foo组件会被渲染。
(2)render
render的值是一个函数，这个函数返回一个React元素，这个函数返回一个React元素。这种方式可以很方便的为待渲染的组件传递额外的属性。
例如：
(

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

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

4.Switch和exact
当URL和多个Route匹配时，这些Route都会执行渲染操作。如果只想让第一个匹配的Router渲染，那么可以把这些Route包到一个Switch组件中。
如果想让URL和Route完全匹配时，Route才渲染，那么可以使用Route的exact属性。Switch和exact常常联合使用，用于应用首页的导航。
例如：

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

5.嵌套路由

嵌套路由是指在Route渲染的组件内部定义新的Route.例如：
const Posts = ({match}) => {

return(
    
        {/*这里match.url等于／posts*/}
        
        
    
)

}
当URL的pathname为"/posts/react"时，PostDetail组件会被渲染；当URL的pathname为"/posts"时，PostList组件会被渲染。Route的嵌套使用让应用可以更加灵活的使用路由。

6.链接

Link是React Router提供的链接组件，一个Link组件定义了当点击该Link时，页面应该如何路由：
例如：
const Navigation = () => (

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

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 (

);
}

function Home() {
return (


  Home

);
}

function About() {
return (


  About

);
}

function Topics({ match }) {
return (


  Topics
  
    
      Rendering with React
    
    
      Components
    
    
      Props v. State
    
  

  
   Please select a topic.}
  />

);
}

function Topic({ match }) {
return (


  {match.params.topicId}

);
}

export default BasicExample;

云服务器服务器托管 react _React React 源码 react cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108983.html

react、react-router、redux 也许是最佳小实践1

摘要：通过声明式编程模型定义组件，是最强大的核心功能。无论是的浏览器书签，还是的导航功能，只要是可以使用的地方，就可以使用。二级路由使用渲染组件属性状态请选择一个主题。也许是最佳小实践地址，觉得有帮助的话，请点击一下，嘿嘿小前言这是一个小小的有关react的小例子，希望通过一个小例子，可以让新手更好的了解到react、react-router4.0、redux的集中使用方法。这是基...

Betta 2019-08-20 17:05 评论0 收藏0
react、react-router、redux 也许是最佳小实践1

摘要：通过声明式编程模型定义组件，是最强大的核心功能。无论是的浏览器书签，还是的导航功能，只要是可以使用的地方，就可以使用。二级路由使用渲染组件属性状态请选择一个主题。也许是最佳小实践地址，觉得有帮助的话，请点击一下，嘿嘿小前言这是一个小小的有关react的小例子，希望通过一个小例子，可以让新手更好的了解到react、react-router4.0、redux的集中使用方法。这是基...

Edison 2019-08-05 11:23 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
React 深入系列1：React 中的元素、组件、实例和节点

摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实...

LeviDing 2019-08-22 17:26 评论0 收藏0
React 深入系列１：React 中的元素、组件、实例和节点

摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解...

techstay 2019-08-22 16:01 评论0 收藏0