带ID的路由与无路径NotFound路由失效问题求助

核心问题分析 #

你遇到的两个问题都是路由配置的基础错误：

• 动态参数路由格式错误：/listings:id缺少参数前的斜杠，正确格式应为/listings/:id，否则react-router无法将/listings/xxx识别为带参数的路由。
• 路由匹配顺序错误：/listings（列表页）和/listings/:id（详情页）顺序写反了，react-router的Routes组件是从上到下匹配第一个符合条件的路由，先写/listings会导致所有/listings/xxx的请求都被匹配到列表页，无法进入详情页。
• NotFound路由配置错误：无path的Route在react-router v6中不会生效，必须设置path="*"来匹配所有未被前面路由覆盖的路径，且要放在路由列表的最后。

修改后的完整代码 #

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './containers/Home';
import About from './containers/About';
import Contact from './containers/Contact';
import Listings from './containers/Listings';
import ListingDetail from './containers/ListingDetail';
import SignIn from './containers/SignIn';
import SignUp from './containers/SignUp';
import NotFound from './components/NotFound';
import Layout from "./hocs/Layout";

const App = () => {
  return (
    <>
      <Router>
        <Layout>
          <Routes>
            <Route path='/' Component={Home} />
            <Route path='/about' Component={About} />
            <Route path='/contact' Component={Contact} />
            {/* 先配置详情页动态路由，再配置列表页路由 */}
            <Route path='/listings/:id' Component={ListingDetail} />
            <Route path='/listings' Component={Listings} />
            <Route path='/signin' Component={SignIn} />
            <Route path='/signup' Component={SignUp} />
            {/* 最后配置通配符路由，匹配所有未命中的路径 */}
            <Route path="*" Component={NotFound} />
          </Routes>
        </Layout>
      </Router>
    </>
  );
}

export default App;

关键修改点说明 #

1. 修正动态路由格式：将/listings:id改为/listings/:id，这是react-router v6定义动态参数路由的标准格式，冒号前加斜杠才能正确捕获/listings/后的id参数。
2. 调整路由顺序：把/listings/:id放在/listings前面，确保/listings/xxx这类带参数的请求优先匹配到详情页，而/listings（不带参数）才匹配列表页。
3. 配置NotFound路由：添加path="*"并放在路由列表末尾，path="*"作为通配符路由，会匹配所有未被前面路由覆盖的路径，放在最后能保证正常路由优先匹配。

修改后，访问http://localhost:3000/listings/afsdf会正确渲染ListingDetail组件，访问不存在的路径（如http://localhost:3000/ahkdhfsad）会渲染NotFound组件，其余路由也能正常工作。

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