react-router provides a simple yet powerful API to easily implement routing functionality in single-page applications built with React. Let’s start with a simple example:

import React from "react";
import { findDOMNode, render } from "react-dom";
import { Link, Route, Router } from "react-router";

let Page1 = React.createClass({
  render() {
    return (
      <div>
        <h1>Page1</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Ab accusantium animi dicta dignissimos earum eos esse impedit ipsum iste
        laboriosam numquam odio perspiciatis porro, quas sequi tempore vero
        vitae voluptates?
      </div>
    );
  },
});

let Page2 = React.createClass({
  render() {
    return (
      <div>
        <h1>Page2</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Fuga porro voluptas voluptatum. Corporis debitis deleniti, doloremque et
        eum ex id iste magni nobis nostrum quae, reiciendis rem repellendus
        similique tempora.
      </div>
    );
  },
});

let App = React.createClass({
  render() {
    return (
      <div>
        <Link to="/page1">Page1</Link>
        <Link to="/page2">Page2</Link>
      </div>
    );
  },
});

render(
  <Router>
    <Route path="/" component={App}>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>,
  document.body,
);

By simply defining the path in the to prop of the <Link> tag, clicking on the Page1 or Page2 links in the rendered page will display the corresponding Components, and the url will also change according to the path. Let’s briefly analyze this code. Here, we’ve defined three routes: one pointing to the root directory, i.e., ’/’, one to ‘page/’, and another to ‘page/2’. Route definitions must be wrapped within <Router></Router>. <Route></Route> defines the path for each route and handles its behavior. path specifies the route, and component is the component to be rendered. It can also provide corresponding handle functions to control the route’s behavior. Next, let’s simulate a login interception scenario.

import React from "react";
import TransitionGroup from "react-addons-transition-group";
import { findDOMNode, render } from "react-dom";
import { History, Link, Route, Router } from "react-router";

require("./index.css");

let goLogin = {
  isLogin: true,
  login() {
    this.isLogin ? this.onChange(false) : this.onChange(true);
    this.isLogin = !this.isLogin;
  },
  onChange() {},
};

let App = React.createClass({
  getInitialState() {
    return {
      login: goLogin.isLogin,
    };
  },
  updateAuth(logged) {
    this.setState({
      login: logged,
    });
  },
  componentWillMount() {
    goLogin.onChange = this.updateAuth;
  },
  render() {
    return (
      <div>
        <nav className="nav">
          {this.state.login ? (
            <Link to="/logout">Log out</Link>
          ) : (
            <Link to="/login">Log in</Link>
          )}
        </nav>
        <ul>
          <li>
            <Link to="/page1" activeClassName="active">
              Page1
            </Link>
          </li>
          <li>
            <Link to="/page2" activeClassName="active">
              Page2
            </Link>
          </li>
        </ul>
        {this.props.children}
      </div>
    );
  },
});

let Login = React.createClass({
  mixins: [History],
  handleClick(event) {
    event.preventDefault();
    goLogin.login();
    var { location } = this.props;
    if (location.state && location.state.nextPathname) {
      this.history.replaceState(null, location.state.nextPathname);
    } else {
      this.history.replaceState(null, "/about");
    }
    console.log(this.history);
  },
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Login</button>
      </div>
    );
  },
});

let Logout = React.createClass({
  componentDidMount() {
    goLogin.login();
  },
  render() {
    return (
      <div>
        <p>You are now logged out</p>
      </div>
    );
  },
});

let About = React.createClass({
  render() {
    return (
      <div>
        <h1>登录成功</h1>
      </div>
    );
  },
});

let Page1 = React.createClass({
  render() {
    return (
      <div className="page">
        <h1>Page1</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Ab accusantium animi dicta dignissimos earum eos esse impedit ipsum iste
        laboriosam numquam odio perspiciatis porro, quas sequi tempore vero
        vitae voluptates?
      </div>
    );
  },
});
let Page2 = React.createClass({
  getInitialState() {
    return {
      className: "pageactive",
    };
  },
  handler() {
    if (this.state.className === "pageactive") {
      this.setState({
        className: "",
      });
    } else {
      this.setState({
        className: "pageactive",
      });
    }
  },
  render() {
    return (
      <div className={`${this.state.className} page`} onClick={this.handler}>
        <h1>Page2</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Fuga porro voluptas voluptatum. Corporis debitis deleniti, doloremque et
        eum ex id iste magni nobis nostrum quae, reiciendis rem repellendus
        similique tempora.
      </div>
    );
  },
});

Define the needLogin function to check if the user is logged in and redirect to the appropriate page based on the status.

function needLogin(nextState, replaceState) {
  if (!goLogin.isLogin) {
    replaceState({ nextPathname: nextState.location.pathname }, "/login");
  }
}

Finally, execute the render command.

render(
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
      <Route path="logout" component={Logout} />
      <Route path="about" component={About} />
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} onEnter={needLogin} />
    </Route>
  </Router>,
  document.body,
);

点击这里查看 DEMO This code implements the following functionality:

1. Initially, the page is in a logged-out state by default.
2. Clicking Page1 at this point will display the content of Page1.
3. When Page2 is clicked, the display of Page content is intercepted, and the login page appears.
4. After you click login, the content of Page2 will be displayed, and the status will switch to Logout.
5. When we click Logout, we will log out.

In this code, when we click on page2, the to prop in the <Link> tag is first triggered to find the corresponding route with path as page2, and then the needLogin event is triggered. Within the needLogin event, we check the goLogin.isLogin status. If the user is not logged in, the path is replaced with ‘/login’. Then, the <Route> with path as ‘/login’ is found, and the Login component is rendered. This means we can listen for events within <Route> to dynamically change the route address as needed.