React同路由路径对应不同组件的跳转问题

嘿，这个问题我之前也碰到过！React Router 匹配路由的时候是按定义顺序来的，相同路径的路由只会渲染第一个匹配到的组件，所以你现在的写法肯定没法区分View和Edit。给你几个实用的解决思路：

方案1：修改路由路径（最直观推荐） #

直接给两个组件设置不同的路由后缀，让路径明确区分，这是最不容易出错的方式：

路由配置（以React Router v6为例） #

import { Routes, Route } from 'react-router-dom';

// 定义不同的路径
<Routes>
  <Route path='/users/:user_id/view' element={<Users.View />} />
  <Route path='/users/:user_id/edit' element={<Users.Edit />} />
</Routes>

页面链接逻辑 #

{type === "A" ? <Link to="/users/1/view">view</Link> : <Link to="/users/1/edit">edit</Link> }

如果是React Router v5，路由配置改成：

<Switch>
  <Route exact path='/users/:user_id/view' component={Users.View} />
  <Route exact path='/users/:user_id/edit' component={Users.Edit} />
</Switch>

方案2：使用查询参数（不修改路径的情况） #

如果不想改动路由的基础路径，可以通过查询参数（query params）来区分模式，然后用一个父组件来根据参数渲染对应的子组件：

路由配置（React Router v6） #

<Routes>
  <Route path='/users/:user_id' element={<Users.Parent />} />
</Routes>

父组件Users.Parent的实现 #

import { useParams, useSearchParams } from 'react-router-dom';

const Parent = () => {
  const { user_id } = useParams();
  const [searchParams] = useSearchParams();
  const mode = searchParams.get('mode'); // 获取mode参数

  return (
    <>
      {mode === 'view' ? <Users.View userId={user_id} /> : <Users.Edit userId={user_id} />}
    </>
  );
};

页面链接逻辑 #

{type === "A" ? <Link to="/users/1?mode=view">view</Link> : <Link to="/users/1?mode=edit">edit</Link> }

如果是React Router v5，父组件可以用useLocation结合参数解析库实现：

import { useParams, useLocation } from 'react-router-dom';
import queryString from 'query-string'; // 需安装query-string库

const Parent = () => {
  const { user_id } = useParams();
  const location = useLocation();
  const { mode } = queryString.parse(location.search);

  return (
    <>
      {mode === 'view' ? <Users.View userId={user_id} /> : <Users.Edit userId={user_id} />}
    </>
  );
};

方案3：通过路由状态（state）传递（适合临时场景） #

还可以通过Link的state属性传递模式，不过这种方式刷新页面后状态会丢失，适合不需要持久化的场景：

页面链接逻辑 #

{type === "A" ? 
  <Link to="/users/1" state={{ mode: 'view' }}>view</Link> : 
  <Link to="/users/1" state={{ mode: 'edit' }}>edit</Link> 
}

路由配置和父组件（React Router v6） #

// 路由还是一个路径
<Routes>
  <Route path='/users/:user_id' element={<Users.Parent />} />
</Routes>

// 父组件获取state
import { useParams, useLocation } from 'react-router-dom';

const Parent = () => {
  const { user_id } = useParams();
  const { state } = useLocation();
  const mode = state?.mode || 'edit'; // 设置默认值

  return (
    <>
      {mode === 'view' ? <Users.View userId={user_id} /> : <Users.Edit userId={user_id} />}
    </>
  );
};

个人最推荐方案1，因为路径语义化清晰，用户和搜索引擎都能明白当前页面的功能，而且不需要额外的参数解析逻辑，维护起来更简单。

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