React Router v4、v5 遇到的问题及解决方法（更新文章详细总结）

React Router 是 React 应用程序中最受欢迎的路由解决方案之一。 React Router v4 和 v5 采用了新的设计理念和语法，让开发者更加容易地管理应用程序的路由。

在使用 React Router v4 和 v5 的过程中，我遇到了一些问题，但是经过学习和实践，我得到了解决方案，并总结了以下方法。

问题1: 如何访问路由参数？

在 React Router v4 和 v5 中，路由参数通过路由路径指定。例如，以下路由路径包含两个参数：/users/:id/profile/:tab。要访问这些参数，您可以使用 match.params 属性，如下所示：

<Route path="/users/:id/profile/:tab" component={Profile} />

class Profile extends React.Component {
  render() {
    const { match } = this.props;
    const { id, tab } = match.params;

    return (
      <div>
        User ID: {id}
        Tab: {tab}
      </div>
    );
  }
}

问题2: 如何实现导航？

在 React Router v4 和 v5 中，通过 Link 组件进行导航。 Link 组件是一个链接，当用户单击它时，应用程序导航到指定的 URL。

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

<Link to="/users">Users</Link>

您还可以使用 history.push 方法进行编程式导航：

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

class MyComponent extends React.Component {
  handleClick = () => {
    const { history } = this.props;

    history.push("/users");
  };

  render() {
    return <button onClick={this.handleClick}>Go to Users</button>;
  }
}

export default withRouter(MyComponent);

问题3: 如何在嵌套路由中传递参数？

在 React Router v4 和 v5 中，通过在 URL 中嵌套参数来实现嵌套路由。您可以通过以下方式传递参数：

<Route path="/topics/:topicId" component={Topic} />

class Topic extends React.Component {
  render() {
    const { match } = this.props;
    const { topicId } = match.params;

    return (
      <div>
        <h1>Topic: {topicId}</h1>
        <Switch>
          <Route path={`${match.path}/posts`} component={Posts} />
          <Route path={`${match.path}/comments`} component={Comments} />
        </Switch>
      </div>
    );
  }
}

<Route path="/topics/:topicId/posts/:postId" component={Post} />

class Post extends React.Component {
  render() {
    const { match } = this.props;
    const { topicId, postId } = match.params;

    return (
      <div>
        <h1>Post {postId} for Topic {topicId}</h1>
      </div>
    );
  }
}

更新

在 React Router v4 和 v5 中，Switch 组件被用于选择最多一个子路由来渲染。但是，由于它不能渲染多个子路由，因此可能会导致子路由被意外地渲染。

要解决这个问题，我们可以使用 Routes 组件。它比 Switch 更灵活，可以根据需要渲染多个子路由。

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

总结：

React Router v4 和 v5 是 React 应用程序中最常用的路由解决方案之一，但是在使用它们的过程中，可能会遇到一些问题。要访问路由参数，可以使用 match.params 属性。要实现导航，可以使用 Link 组件或 history.push 方法。要在嵌套路由中传递参数，可以在 URL 中嵌套参数。最后，我们可以使用 Routes 组件来解决 Switch 组件不能渲染多个子路由的问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6591b370eb4cecbf2d6bdb4c