React动态路由下如何渲染404页面？

问题核心在于：当用户输入错误ID时，/location/:id路由已经成功匹配，会渲染LocationPage组件而非Page404，所以单独配置/location/*路由不会生效——因为路由匹配是按声明顺序优先匹配更具体的路径。

你需要在LocationPage组件内部判断ID对应的资源是否存在，不存在则重定向到404页面，具体修改如下：

步骤1：修改LocationPage组件 #

1. 导入Navigate组件实现重定向
2. 增加资源存在性判断，不存在则返回重定向逻辑
3. 避免因location为undefined导致的渲染报错

修改后的代码：

import React, { Fragment } from 'react'
import { useParams, Navigate } from 'react-router-dom';
import locations from "../data/data.json";
import { Carousel, Infos } from "../components/LocationPageComponents"
import { Accordeon } from '../components';

const LocationPage = () => {
  const { id } = useParams();
  const location = locations.find(location => location.id === id)

  // 若未找到对应资源，直接重定向到404页面
  if (!location) {
    return <Navigate to="/404" replace />;
  }
  
  return (
    <Fragment>
      <Carousel pictures={location.pictures} key="Carousel"/>
      <Infos currentLocation={location}/>
      <div className="more-infos">
        <Accordeon content={{title: "Description", reply: location.description }} />
        <Accordeon content={{title: "Équipements", equipments: location.equipments }} />
      </div>
    </Fragment>
  )
}

export default LocationPage

步骤2：确保404路由配置正确 #

你的现有路由配置无需修改，path="*"会匹配所有未被前面路由匹配的路径，包括直接访问不存在的路径（比如/invalid-path）：

<Route path="/location/:id" element={<LocationPage/>} />
<Route path="*" element={<Page404/>} />

这样处理后，无论是输入错误ID访问/location/xxx，还是直接访问不存在的路径，都会正确显示Page404页面。

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