React-Router动态路由匹配异常：访问/Create/4时错误渲染Create组件而非Blogdetails组件

我来帮你理清这个问题的核心原因，其实是两个关键的认知和配置错误导致的：

1. 路由路径与预期完全不匹配 #

你期望访问 http://localhost:3001/Create/4 时渲染 Blogdetails 组件，但你的动态路由配置的是 /blogs/:id —— 这个路由只会匹配以 /blogs/ 开头的URL（比如 http://localhost:3001/blogs/4），根本不会对 /Create/4 这个路径生效。这是你最核心的误解点：你的动态路由路径和你测试的URL完全不对应。

2. 静态路由缺少exact属性导致前缀匹配 #

退一步说，即使你是想让 /Create/:id 匹配动态路由，当前的 path='/Create' 路由没有添加 exact 属性，React-Router 默认采用前缀匹配规则：只要URL的前缀和路由path一致，就会匹配成功。所以当你访问 /Create/4 时，Switch会第一个匹配到 path='/Create' 的路由，直接渲染Create组件，不会继续往下查找其他路由。

解决步骤 #

方案一：修正URL匹配正确的动态路由（推荐，符合语义）

如果你想查看ID为4的博客详情，应该访问的是 http://localhost:3001/blogs/4，同时给静态路由/Create添加exact属性，避免子路径误匹配：

修改你的App.js路由配置：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Components/Home';
import Blogdetails from './Components/Blogdetails';
import Create from './Components/Create';

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/blogs/:id' component={Blogdetails} />
          {/* 给Create路由添加exact，确保仅匹配完全等于/Create的URL */}
          <Route exact path='/Create' component={Create} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

此时访问/blogs/4，Blogdetails组件会正确渲染并显示Blog Details - 4；访问/Create则会正常渲染Create组件。

方案二：调整动态路由路径（不推荐，不符合语义）

如果你确实需要 /Create/4 这样的URL来渲染博客详情（虽然从语义上看，详情页放在/blogs/下更合理），你需要添加对应的动态路由，并确保它放在静态/Create路由的前面（同时给静态路由加exact）：

<Switch>
  <Route exact path='/' component={Home} />
  {/* 把/Create/:id动态路由放在静态路由前面 */}
  <Route path='/Create/:id' component={Blogdetails} />
  <Route exact path='/Create' component={Create} />
  <Route path='/blogs/:id' component={Blogdetails} />
</Switch>

额外说明 #

React-Router的Switch组件会按照路由定义的顺序，匹配第一个符合条件的路由：

• 不加exact的路由是前缀匹配，比如path='/a'会匹配/a、/a/b、/a/123等所有以/a开头的URL
• 加了exact的路由是完全匹配，只有URL和path完全一致时才会触发

你之前调整路由顺序没用，本质是因为你测试的URL和动态路由路径完全不对应，调整顺序自然解决不了问题。

验证方法 #

1. 访问 http://localhost:3001/blogs/4，确认Blogdetails组件正确显示ID
2. 访问 http://localhost:3001/Create，确认Create组件正常渲染
3. 访问 http://localhost:3001/Create/4，此时如果用方案一，这个URL不会匹配任何路由（会显示Switch外的内容或空白）；如果用方案二，会正确渲染Blogdetails组件

备注：内容来源于stack exchange，提问作者Dewashish Sahu