React-Router 中的坑与解决方案

React-Router 是 React 中常用的路由库，它提供了简单易用的路由功能，但在使用过程中也有一些坑需要注意。本文将对 React-Router 中的常见坑点进行分析，并提供解决方案和示例代码，帮助读者更好地理解和使用 React-Router。

1. 路由匹配顺序

React-Router 的路由匹配是按照路由声明的顺序进行的。这意味着如果有多个路由都能匹配当前 URL，那么只会匹配第一个能够匹配成功的路由，而不会继续往下匹配。这可能会导致一些意想不到的结果，比如以下代码：

<Switch>
  <Route path="/posts/:id" component={Post} />
  <Route path="/posts/new" component={NewPost} />
  <Route path="/posts" component={PostList} />
</Switch>

假设当前 URL 为 /posts/new，那么由于第一个路由能够匹配成功，将会渲染 Post 组件而不是 NewPost 组件。为了避免这种情况，我们需要将具有相同前缀的路由放在后面，或使用 exact 属性进行精确匹配。

<Switch>
  <Route exact path="/posts" component={PostList} />
  <Route path="/posts/new" component={NewPost} />
  <Route path="/posts/:id" component={Post} />
</Switch>

2. 动态路由参数

React-Router 支持在路由中使用动态参数，比如 :id。这些参数可以通过 props.match.params 对象获取。但是，如果组件被多个路由匹配，那么 props.match.params 中的参数可能会发生变化，导致组件状态不一致。例如：

<Switch>
  <Route path="/posts/:id" component={Post} />
  <Route path="/users/:id" component={User} />
</Switch>

假设当前 URL 为 /posts/1，那么 Post 组件的 props.match.params.id 将为 1。但是，如果切换到 /users/1，那么 Post 组件的 props.match.params.id 将变为 undefined，因为当前 URL 并没有匹配到 /posts/:id 路由。

为了避免这种情况，我们可以使用 withRouter 高阶组件将路由参数传递给组件，而不是从 props.match.params 中获取。

// www.javascriptcn.com code example
import { withRouter } from 'react-router-dom';

class Post extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return (
      <div>
        <h1>Post {id}</h1>
      </div>
    );
  }
}

export default withRouter(Post);

3. 嵌套路由

React-Router 支持嵌套路由，即在一个组件中嵌套另一个组件的路由。但是，在嵌套路由中，父组件和子组件的路由声明必须正确匹配，否则可能会导致路由无法匹配成功。例如：

// www.javascriptcn.com code example
<Switch>
  <Route path="/posts/:id" component={Post} />
  <Route path="/users/:id" component={User} />
  <Route path="/" component={Home} />
</Switch>

class User extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return (
      <div>
        <h1>User {id}</h1>
        <Switch>
          <Route path="/users/:id/posts" component={UserPosts} />
        </Switch>
      </div>
    );
  }
}

class UserPosts extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return (
      <div>
        <h1>User {id} Posts</h1>
      </div>
    );
  }
}

假设当前 URL 为 /users/1/posts，那么由于父组件的路由声明没有匹配成功，将会渲染 Home 组件而不是 UserPosts 组件。为了解决这个问题，我们需要在父组件的路由声明中使用 exact 属性进行精确匹配。

// www.javascriptcn.com code example
<Switch>
  <Route exact path="/posts/:id" component={Post} />
  <Route exact path="/users/:id" component={User} />
  <Route exact path="/" component={Home} />
</Switch>

class User extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return (
      <div>
        <h1>User {id}</h1>
        <Switch>
          <Route exact path="/users/:id/posts" component={UserPosts} />
        </Switch>
      </div>
    );
  }
}

结语

React-Router 是一个非常强大和灵活的路由库，但在使用过程中也有一些需要注意的坑点。本文介绍了一些常见的坑点，并提供了解决方案和示例代码，希望能帮助读者更好地理解和使用 React-Router。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d154d4a941bf71342d484f