React-Router 4 的新玩意儿

上一个项目用的还是 2.6.1,转眼的功夫 4.0 都发布了,API 变化实在有点大,2.X那套东西不顶用了,老老实实重新看一遍文档,其中有几点需要注意的,拿出来说一说。

本文只讨论针对浏览器的应用,使用 react-router-dom(在react-router基础上封装了一些高级组件)进行说明。

  1. 关于BrowserRouter:

如果按照原来的使用方式,就掉进第一个坑里了:history不合法。

用 react-router-dom 中的 <HashRouter>组件代替原来的 <Router> 组件就可以了。

这是之前2.X版本处理浏览器路由的方式,4.0版本中推荐另一个组件:<BrowserRouter >

换上<BrowserRouter >之后会出现 2 个问题:

如果你不是通过服务器启动应用,因为chrome自身的安全机制,在本地环境下根本不能用chrome玩。这个不关键,我本地测试换个浏览器还不行么,本地起个服务器也不麻烦。

关键问题,刷新就是404。原因很简单,BrowserRouter 和 HashRouter 完全不同,前者利用H5的 history 接口,前台路由就是后台收到的路由,你点到其他页面一刷新,得,根本没这个文件,服务器也很无辜,到底让我渲染个啥?后台也可以简单的解决这个问题:甭管你请求的啥地址,我先把入口文件扔给你。node处理方式如下(需要express):

app.get(‘*‘,(request,response)=>{

  response.sendFile(path.resolve(__dirname,‘../index.html‘))

})

启动node服务器,通过本机服务器访问,完美解决上面两个问题。

(<MemoryRouter> 和 <StaticRouter> 分别是非浏览器环境和服务器端渲染用的,在此不做讨论。)

  1. BrowserRouter 里可以存在各种标签。

原来用惯了2.X的同志们,看到新文档的例子可能会发现这个问题:Router里边不是只能有Route么,怎么什么都有。是的,4.0中 Router 里可以存在各种标签。

  1. 导航连接<NavLink>:

看名字就是导航用的,主要用途就是区分激活的状态,激活时的样式。之前揉柔在Link里的。

  1. 只渲染第一个匹配的组件<Switch>:

一个路由可能同时匹配多个路径,在<Switch>中,只渲染匹配的第一个,其他的放弃。之前这是Router的默认行为,4.0中为什么不默认了呢?答:可以将多个Route组合到页面中。想一想,如果你就是想同时渲染多个组件而不只是第一个呢?很欣慰看到我在2.X中吐槽的问题得到了解决。4.0版本给我最大的感觉就是:他让浏览器更灵活的去渲染页面。

  1. <Route>的渲染方法:

<Route component>

<Route render>

<Route children>

component和之前2.X的方法相同。

render可以传个函数避免创建新的React element(内联渲染时使用避免不必要的重载)。

children使用方式与render一致,只不过无论路由是否匹配都会被渲染。

exact属性为 true 则需要路由完全匹配时才渲染组件(之前也是默认行为)。

  1. 三个重要对象:history,location,match

在 Route component 中,以 this.props.location 的方式获取,

在 Route render 中,以 ({ location }) => () 的方式获取,

在 Route children 中,以 ({ location }) => () 的方式获取,

History 和 match的获取方式类似。

时间: 2024-07-30 06:25:28

React-Router 4 的新玩意儿的相关文章

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

请表明转载链接:http://www.cnblogs.com/zhangkunweb/p/6853728.html 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉. 今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql +

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

关于react router 4 的小实践

详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react-app搭建: 首先需要安装好create-react-app npm install -g create-react-app 安装完毕之后就是搭建项目: create-react-app your-project-name cd your-project-name npm start 安装完成之后

[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen. Import Link: import { BrowserRouter as Router, Route, Link

[React Router V4] Create Basic Routes with the React Router v4 BrowserRouter

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components. After create

[Redux] Filtering Redux State with React Router Params

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time. Now when we click the filter, the url changes, but the todos list doesn't change. So continue with that. Router only r

[Redux] Navigating with React Router &lt;Link&gt;

We will learn how to change the address bar using a component from React Router. In Root.js: We need to add a param to change the Route: import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route, browserHistory } from 're

[Redux] Adding React Router to the Project

We will learn how to add React Router to a Redux project and make it render our root component. Install: npm install --save react-router import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route} from 'react-router'; impo