当前位置：首页 > React

实现react router 4.0

2026-01-27 03:08:03React

安装 React Router

使用 npm 或 yarn 安装 React Router 的依赖包。React Router 4.0 分为核心库和针对不同环境的包（如 web 和 native）。对于 web 应用，安装 react-router-dom。

npm install react-router-dom
# 或
yarn add react-router-dom

基本路由配置

在应用的入口文件（如 App.js）中引入 BrowserRouter 和 Route 组件。BrowserRouter 是路由的容器组件，Route 用于定义路由规则。

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

导航链接

使用 Link 或 NavLink 组件实现导航跳转。NavLink 支持高亮当前激活的路由。

实现react router 4.0

import { Link, NavLink } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

动态路由与参数传递

通过 Route 的 path 属性定义动态路由，使用 :param 语法捕获参数。在组件中通过 props.match.params 访问参数。

<Route path="/user/:id" component={User} />

// User.js
function User(props) {
  const { id } = props.match.params;
  return <div>User ID: {id}</div>;
}

嵌套路由

在子组件中继续使用 Route 组件实现嵌套路由。父路由的 path 需要与子路由的路径拼接。

实现react router 4.0

<Route path="/products" component={Products} />

// Products.js
function Products(props) {
  return (
    <div>
      <Route path={`${props.match.path}/:id`} component={ProductDetail} />
    </div>
  );
}

重定向与编程式导航

使用 Redirect 组件实现重定向，或通过 props.history 实现编程式导航。

import { Redirect } from "react-router-dom";

function PrivateRoute(props) {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? <Route {...props} /> : <Redirect to="/login" />;
}

// 编程式导航
function handleClick(props) {
  props.history.push("/new-path");
}

404 页面处理

通过 Switch 组件包裹路由，确保只有一个路由被匹配。将 path 为 * 的路由放在最后作为 404 页面。

import { Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

路由守卫

通过高阶组件或自定义 Route 实现路由守卫，例如验证用户权限后再渲染目标组件。

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

以上方法涵盖了 React Router 4.0 的核心功能，可根据实际需求组合使用。