React Router v5嵌套路由问题：Link路径undefined且组件同页渲染

嘿，我来帮你搞定这两个React路由的问题，这俩都是嵌套路由里常见的小坑，咱们一个个来解决：

问题1：<Link>生成的路径为undefined #

你这里犯了一个很容易疏忽的小错误：在map循环里，你写的是/events/${data.events.id}，但data.events是整个事件数组，它本身并没有id属性，你要访问的是循环中当前迭代的event对象的id，应该用event.id才对。

修改后的<Link>代码：

{data.events.map(event => (
  {/* 注意这里用event.id，还要加上key属性避免React警告 */}
  <Link key={event.id} to={`/events/${event.id}`}>
    <EventCard data={event} />
  </Link>
))}

问题2：Event组件与原组件同页渲染 #

出现这个问题的核心原因是：你的事件列表部分没有被路由规则限制，不管当前路径是什么，它都会直接渲染；同时如果父级路由（比如挂载Events组件的/events路由）没有添加exact属性，访问/events/:eventId时，/events也会被匹配到，导致父组件（带列表）和子组件（Event）同时显示。

解决方案：用Switch包裹所有路由分支 #

把列表页和详情页都放进Switch里，给列表页的路由加上exact属性，确保只有路径完全匹配/events时才渲染列表，访问详情路径时只渲染Event组件。

修改后的完整Events.js代码：

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

const data = {
 "events":[
 { "id":"1234", "name":"Meetup", "description":"Tech meetup" },
 { "id":"34234", "name":"Test", "description":"Events" }
 ]
};

const Events = () => {
  return (
    <div>
      <Switch>
        {/* 列表页：仅当路径完全匹配/events时渲染 */}
        <Route path="/events" exact>
          {data.events.map(event => (
            <Link key={event.id} to={`/events/${event.id}`}>
              <EventCard data={event} />
            </Link>
          ))}
        </Route>
        {/* 详情页：匹配/events/:eventId路径 */}
        <Route path={`/events/:eventId`} render={(props) => <Event {...props} />}/>
      </Switch>
    </div>
  );
};

export default Events;

另外要注意：确保在你的根路由配置（比如App.js）中，Events组件的路由不需要加exact，这样嵌套路由才能正常工作：

// App.js示例
<Route path="/events" component={Events} />

这样调整后，点击卡片访问详情页时，就只会渲染Event组件了。

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