反应路由器纱线 - Javascript

简介

React Router是一个用于构建单页Web应用程序的第三方Javascript库。它允许你定义路由并在URL上监听和响应这些路由。React Router支持丰富的路由匹配规则，包括正则表达式和参数匹配，还可以进行嵌套路由和重定向。

安装

通过npm安装React Router:

npm install --save react-router-dom

安装完成后，在代码中导入React Router:

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

基本用法

React Router提供了多种用法。以下是其中的一种：

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

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about/" component={About} />
      </div>
    </Router>
  );
}

export default App;

以上代码中我们定义了两个组件Home和About，通过导入BrowserRouter、Route 和 Link 组件构建了一个基本的路由导航，将Home和About与对应路径绑定，拦截处理对应路径的请求并返回相应组件。

路由参数

React Router还提供了路由参数，让URL能够更丰富而多变，以下我们为路由添加一个参数id：

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

function User(props) {
  return (
    <div>
      <h2>User {props.match.params.id}</h2>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/users/1">User 1</Link>
            </li>
            <li>
              <Link to="/users/2">User 2</Link>
            </li>
          </ul>
        </nav>

        <Route path="/users/:id" component={User} />
      </div>
    </Router>
  );
}

export default App;

通过将路由路径设置为/users/:id，我们可以动态匹配URL中的id参数，从而在页面中显示对应的User组件。

嵌套路由

React Router还支持嵌套路由，当我们希望将某个组件拆分成更小的组件来处理某些子路由时，嵌套路由就发挥了很大的作用：

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

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Topic({ match }) {
  return <h3>Requested Param: {match.params.id}</h3>;
}

function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <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.path}/:id`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

export default App;

通过将路由路径设置为/topics/:id，我们可以在页面中显示对应的Topic组件，将其嵌套在Topics组件中。

重定向

React Router还支持重定向，允许我们在匹配到某个路由时自动跳转到另一个路由：

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

function AuthExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/public">Public Page</Link>
          </li>
          <li>
            <Link to="/protected">Protected Page</Link>
          </li>
        </ul>

        <Route path="/public" component={Public} />
        {/* 需要登录才能访问 */}
        <PrivateRoute path="/protected" component={Protected} />
      </div>
    </Router>
  );
}

function Public() {
  return <h3>Public</h3>;
}

function Protected() {
  return <h3>Protected</h3>;
}

// 当用户未登录时重定向到登录页面
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

export default AuthExample;

结束语

React Router是一个十分强大的Javascript库，它提供了许多路由匹配规则、路由参数、嵌套路由和重定向等功能，非常方便地帮助我们构建单页Web应用程序。如果你还没有使用过React Router，请尝试使用它来构建你的下一个项目！