React Router 为动态路由渲染错误组件的问题

Question

我遇到了 React Router 的问题，使用动态参数导航到特定 URL 会渲染错误的组件。具体来说，当导航到 http://localhost:3001/Create/4 时，将呈现 Create 组件，而不是与 ID 4 关联的预期 Blogdetails 组件。

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">
        {/* Other components or content */}
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/blogs/:id' component={Blogdetails} />
          <Route path='/Create' component={Create} />
        </Switch>
        {/* Other components or content */}
      </div>
    </Router>
  );
}

export default App;

import React from "react";
import { useParams } from "react-router-dom";

const Blogdetails = () => {
    const { id } = useParams();
    return (
        <div className="blog-details">
            <h2>Blog Details - {id}</h2>
        </div>
    );
}

export default Blogdetails;

尽管重新排列了路由顺序并验证了 useParams 挂钩，问题仍然存在。有人可以帮助我确定 React Router 可能导致这种意外行为的原因吗？

重新排列组件中的路由顺序，确保动态路由（/blogs/:id）位于静态路由（/Create）之前。 验证了 Blogdetails 组件中 useParams 挂钩的实现，以正确从 URL 中提取 id 参数。 检查应用程序其他部分中定义的任何冲突路由或冲突路径。 预期结果：

导航到 http://localhost:3001/Create/4 后，我预计将呈现 Blogdetails 组件，显示 ID 为 4 的博客的详细信息。我预计路由模式 /blogs/:id 将与 URL 匹配并在提取 id 参数时正确渲染 Blogdetails 组件。

实际结果：

当导航到 http://localhost:3001/Create/4 时，应用程序不会呈现 Blogdetails 组件，而是呈现 Create 组件。尽管重新排序了路由并确保 useParams 钩子的正确实现，问题仍然存在。

Answer 1

如果您希望匹配路径

"/create/4"

并渲染

BlogDetails

，那么您需要渲染一条可以匹配它的路线。目前，

BlogDetails

组件仅在"/blogs/:id"路线上渲染，因此路线

"/create"

是下一个最佳匹配，并且渲染

Create

组件。添加

"/create/:id"

路线路径。

function App() {
  return (
    <Router>
      <div className="App">
        {/* Other components or content */}
        <Switch>
          <Route
            path={['/blogs/:id', '/create/:id']} // <-- specify path array
            component={Blogdetails}
          />
          <Route path='/create' component={Create} />
          <Route path='/' component={Home} />
        </Switch>
        {/* Other components or content */}
      </div>
    </Router>
  );
}