Skip to content

React Router V4 系列专栏(一) #176

Open
@GuoYongfeng

Description

@GuoYongfeng
Member

React Router V4 系列专栏(一)

不知不觉,React Router 已经引来了 Version 4。对于前端的开源技术产品,每次框架/库的升级总是不免给开发的小伙伴带来一次阵痛,享受新的功能特性的同时,也还的花时间和精力去学习和适应。

新版概述

就package而言,这次 React Router 一分为三,跟React之前升级的套路是一样的。

react-router-dom
react-router-native	
react-router

升级的理念

  • 声明式 Declarative
  • 可组合 Composability

新的React Router 从 React 汲取了很多思想和理念,它所提供的路由都可以看成是一个组件。所以,如果你会react,那么你就了解React Router,他们的核心是一样的。

安装和下载

最新正式的V4还没有发布,可以通过以下方式获取安装:

$ npm install --save react-router@next

然后继续以我们熟悉的方式引入:

// using ES6 modules
import { Router, Route, Switch } from 'react-router'

// using CommonJS modules
var Router = require('react-router').Router
var Route = require('react-router').Route
var Switch = require('react-router').Switch

Web

npm install react-router-dom@next
# or
yarn add react-router-dom@next

引入使用

import {
  BrowserRouter as Router,
  StaticRouter, // for server rendering
  Route,
  Link
  // etc.
} from 'react-router-dom'

Native

yarn add react-router-native@next
# or if not using the react-native cli
npm install react-router-native@next

引入使用

import {
  NativeRouter as Router,
  DeepLinking,
  AndroidBackButton,
  Link,
  Route
  // etc.
} from 'react-router-native'

快速上手使用

create-react-app

使用 create-react-app快速初始化我们的应用。

sudo npm install create-react-app -g
create-react-app router-demo
cd router-demo && yarn 
yarn start

(以上我使用的是 yarn 安装项目依赖,主要是快而且管理方便)

示例代码

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)


const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

const Topics = ({ match }) => {
  console.log( 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.url}/:topicId`} component={Topic}/>
      <Route exact path={match.url} render={() => (
        <h3>Please select a topic.</h3>
      )}/>
    </div>
  )
}

const BasicExample = () => (
  <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>
)


export default BasicExample

Activity

justjavac

justjavac commented on Mar 20, 2017

@justjavac

非常不错。 👍

搭车推荐 React Router V4 中文文档

fefuns

fefuns commented on Aug 3, 2017

@fefuns

@justjavac 好像还没翻译完..

justjavac

justjavac commented on Aug 3, 2017

@justjavac

80% 了

SPxiaomin-zz

SPxiaomin-zz commented on Oct 3, 2017

@SPxiaomin-zz

其他系列的文章呢?博主

huyansheng3

huyansheng3 commented on Oct 13, 2017

@huyansheng3

第二篇吗?

zhangfaliang

zhangfaliang commented on Sep 3, 2018

@zhangfaliang

我这两天看一下reacttraining官网的 example guides 和api ,有点疑惑使用react-router-config集中管理好还是组件化管理好 ?

zwl1619

zwl1619 commented on Dec 17, 2018

@zwl1619

React Router V4 系列专栏(二)什么时候出呢?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @justjavac@fefuns@GuoYongfeng@SPxiaomin-zz@huyansheng3

        Issue actions

          React Router V4 系列专栏(一) · Issue #176 · iuap-design/blog