React RouterReact Router入门


备注

React Router是React.js的一个流行且完整的路由库,它使UI与URL保持同步。它支持延迟代码加载,动态路由匹配和位置转换处理,最初的灵感来自Ember的路由器。

TODO:此部分还应提及react-router中的任何大型主题,并链接到相关主题。由于react-router的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

发布日期
1.0.0 2015年11月9日
1.0.1 2015年12月5日
1.0.2 2015年12月8日
1.0.3 2015年12月23日
2.0.0 2016年2月10日
2.0.1 2016年3月9日
2.1.0 2016年4月11日
2.1.1 2016年4月11日
2.2.0 2016年4月13日
2.2.1 2016年4月14日
2.2.2 2016年4月14日
2.2.3 2016年4月15日
2.2.4 2016年4月15日
2.3.0 2016年4月18日
2.4.0 2016年4月28日
2.4.1 2016年5月19日
2.5.0 2016年6月22日
2.5.1 2016年6月23日
2.5.2 2016年7月1日
2.6.0 2016年7月18日
2.6.1 2016年7月29日
2.7.0 2016年8月20日
2.8.0 2016年9月9日
2.8.1 2016年9月13日
3.0.0 2016年10月24日
3.0.1 2017年1月12日
3.0.2 2017年1月18日
3.0.3 2017年3月28日
3.0.4 2017年4月9日
3.0.5 2017年4月10日
4.0.0 2017年4月12日
4.1.0 2017年4月12日
4.1.1 2017年4月12日

入门

这个入门假设你正在使用create-react-app ,或使用Babel和所有好东西的同等工作。

还可以在这里查看精彩的文档。

首先,安装react-router-dom:

npm install react-router-domyarn add react-router-dom

然后,创建一个存在基本Navbar的组件,其中包含两个项目和基本页面:

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

const Home = () => (
  <div>
    <p>We are now on the HOME page</p>
  </div>
)

const About = () => (
  <div>
    <p>We are now on the ABOUT page</p>
  </div>
)

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr/>
      <Route path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </BrowserRouter>
)
export default App
 

让我们一步一步地看看这段代码:

  • import React from 'react' 导入React :确保导入React
  • import { BrowserRouter as Router, Route, Link } from 'react-router-dom' 拆分import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  • BrowserRouter 是实际的路由器本身。确保将组件包装在BrowserRouter 组件中。
  • Route 是可以导航到的一条特定路线
  • Link 是一个生成<a href="..."> 标记的组件,您可以将其用作超链接。

  • const Home 是一个返回主页的函数。
  • const About 是一个返回About页面的函数。

  • const App 是主要组件:

  • <BrowserRouter> 是包装要在其中使用<Route> 组件的组件的JSX组件。

  • ' is a single element to wrap all JSX inside the BrowserRouter中is a single element to wrap all JSX inside the

  • <ul> 是Navbar。它包含指向Home的链接和指向About的链接。

  • <li><Link to="/">Home</Link></li> 指向主页的链接。您可以看到,由于链接引用“/”,因此空的相对路径将呈现主页。

  • <li><Link to="/about">About</Link></li> 指向“关于”页面的链接。

  • <Route path="/" component={Home}/> 描述了相对路径为"/" 时应呈现的组件。

  • <Route path="/about" component={About}/> 描述了相对路径为"/about" 时应呈现的组件。

很多东西要从这里学习,但希望这能解释基础知识,所以从这里你可以继续学习。

使用React和React路由器的Hello World

一旦你安装了reactreact-router ,就可以把它们放在一起了。

语法非常简单,您可以在打开该URL时指定要呈现的urlcomponent

<Route path="hello" component={ HelloComponent } />

这意味着当url路径为hello ,渲染组件HelloComponent


FILENAME: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, Link } from 'react-router';

// These are just demo components which render different text.

let DashboardPage = () => (
  <div>
    <h1>Welcome User</h1>
    <p>This is your dashboard and I am an example of a stateless functional component.</p>
    <Link to="/settings">Goto Settings Page</Link>
  </div>
)

let SettingsPage = () => (
  <div>
    <h1>Manage your settings</h1>
    <p>display the settings form fields here...or whatever you want</p>
    <Link to="/">Back to Dashboard Page</Link>
  </div>
)

let AuthLoginPage = () => (
  <div>
    <h1>Login Now</h1>
    <div>
      <form action="">
        <input type="text" name="email" placeholder="email address" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit">Login</button>
      </form>
    </div>
  </div>
)

let AuthLogoutPage = () => (
  <div>
    <h1>You have been successfully logged out.</h1>
    <div style={{ marginTop: 30 }}>
      <Link to="/auth/login">Back to login page</Link>
    </div>
  </div>
)

let ArticlePage = ({ params }) => (
  <h3>Article {params.id}</h3>
)

let PageNotFound = () => (
  <div>
    <h1>The page you're looking for doesn't exist.</h1>
  </div>
)

// Here we pass Router to the render function.
render( (
    <Router history={ browserHistory }>

      <Route path="/" component={ DashboardPage } />
      <Route path="settings" component={ SettingsPage } />

      <Route path="auth">
        <IndexRoute component={ AuthLoginPage } />
        <Route path="login" component={ AuthLoginPage } />
        <Route path="logout" component={ AuthLogoutPage } />
      </Route>
    
      <Route path="articles/:id" component={ ArticlePage } />

      <Route path="*" component={ PageNotFound } />

    </Router>
  ), document.body );
 

路由参数 :路由器路径可以配置为获取参数,以便我们可以读取组件的参数值。 <Route path="articles/:id" component={ ArticlePage } /> 中的<Route path="articles/:id" component={ ArticlePage } /> 具有/:id 。此id 变量用于path参数的目的,可以使用{props.params.id} 在组件ArticlePage 访问它。

如果我们访问http://localhost:3000/#/articles/123 那么组件ArticlePage {props.params.id} 将被解析为123.但访问url http://localhost:3000/#/articles ,不会因为没有id参数而工作。

可以通过在一对括号之间写入路由参数来使其成为可选
<Route path="articles(/:id)" component={ ArticlePage } />

如果你想使用子路线 ,那么你可以这样做

<Route path="path" component={ PathComponent }>
  <Route path="subpath" component={ SubPathComponent } />
</Route>
 
  • 访问/path 时,将呈现PathComponent
  • /path/subpath 是被访问时, PathComponent 将呈现和SubPathComponent 将被传递给它props.children

您可以使用path="*" 来捕获所有不存在的路由并呈现404 page not found 页面。

安装和设置

要安装React Router,只需运行npm命令

npm install --save react-router

而且你已经完成了。这就是安装反应路由器所需的全部工作。

请注意: react-router 依赖于react ,因此请确保安装也react

建立:

使用ES6转换器,如babel

import { Router, Route, Link } from 'react-router'
 

不使用ES6转换器

var Router = require('react-router').Router
var Route = require('react-router').Route
var Link = require('react-router').Link
 

使用UMD构建进行安装

npmcdn上也提供了构建 。您可以像这样包含脚本:

<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
 

该库将在window.ReactRouter 全局window.ReactRouter