反应路由器概述

React Router 这些年来经历了一些变化。 这是最新版本的介绍：React Router 4。

安装反应路由器

与安装任何软件包相同。 不过，您可能需要 react-router-dom 而不是 react-router：

$ yarn add react-router-dom

# or with npm:
$ npm install react-router-dom --save

设置路线

它实际上非常直观。 只需在 Router 的子元素中定义 Routes：

import React, { Component } from 'react';
// This example's for browser use, so I'm using `BrowserRouter`.
// The are other routers for other environments, though.
import { BrowserRouter, Route } from 'react-router-dom';

// Your components.
import AboutPage from './AboutPage';
import HomePage from './HomePage';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          {/* `component` will render when `path` matches the user's location */}
          {/* `exact` makes it so it only renders if `path` matches exactly. */}
          {/* Otherwise, `HomePage` would render on "mysite.com/About" as well as "mysite.com/". */}
          <Route exact path="/" component={HomePage}/>
          <Route path="/About" component={AboutPage}/>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

链接到路线

当然，如果用户必须手动编辑 URL，路由就没那么有用了。 React Router 以 Link 组件的形式提供了一个解决方案：

import React from 'react';
import { Link } from 'react-router-dom';

// Our Home Page.  Exciting stuff.
export default function HomePage() {
  return (
    <div>
      <h1>{'Home Page'}</h1>
      {/* A link to the About route. */}
      <Link to="/About">{'Check out our About Page!'}</Link>
    </div>
  );
}

如果您想知道为什么不应该只使用锚标记 (<a>)：React Router 使用历史对象做了一些很酷的事情。