React Router v4路由重写与组件匹配控制问题咨询

嘿，我来帮你搞定React Router v4的这个问题！

首先，你遇到的多个组件同时加载的问题，大概率是因为没用到<Switch>组件——React Router v4默认会渲染所有匹配到的<Route>，而<Switch>会只渲染第一个匹配的路由，完美解决这个问题。

接下来是你要的正则匹配和路径美化需求，咱们一步步来：

1. 基础路由配置（解决多组件加载+默认跳转） #

先把路由用<Switch>包裹，把更具体的路由放在前面，同时设置默认路由重定向到Home：

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

function App() {
  return (
    <Router>
      <Switch>
        {/* 默认根路径重定向到Home */}
        <Route exact path="/" render={() => <Redirect to="/home" />} />
        {/* Home组件路由 */}
        <Route path="/home" component={Home} />
        {/* 匹配/user后跟数字的路径（比如/user1234），用正则提取用户ID */}
        <Route path="/user:id(\d+)" component={userProfileComponent} />
        {/* Counter组件路由，确保路径不会和用户路由冲突 */}
        <Route path="/counter" component={Counter} />
        {/* 404页面，放在最后兜底 */}
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

2. 在用户组件中提取ID #

在userProfileComponent里，你可以通过props.match.params.id拿到匹配到的用户ID：

const userProfileComponent = (props) => {
  const userId = props.match.params.id;
  return <div>用户ID：{userId} 的个人主页</div>;
};

3. 实现路径美化（/user123替代/user/123） #

如果是内部跳转，直接构造/user${userId}格式的路径即可：

// 比如在Home组件里跳转
const Home = (props) => {
  const goToUserProfile = () => {
    props.history.push('/user1234'); // 地址栏会显示/user1234
  };

  return <button onClick={goToUserProfile}>查看用户1234主页</button>;
};

如果需要兼容旧路径（比如用户输入/user/1234要自动跳转到/user1234），可以加一个重定向路由：

<Switch>
  {/* 新增重定向，把/user/1234转成/user1234 */}
  <Route path="/user/:id(\d+)" render={(props) => {
    return <Redirect to={`/user${props.match.params.id}`} />;
  }} />
  {/* 其他路由... */}
</Switch>

这样一来，既解决了多组件同时加载的问题，又实现了你要的路径格式需求～

内容的提问来源于stack exchange，提问作者vkampouris