React.js添加/:id动态路由后postJournal路由无法跳转怎么解决？

问题根因 #

1. 路由匹配顺序错误：React Router的Switch组件遵循从上到下的优先匹配规则，你将动态参数路由/:id放在了固定路由/postJournal前面，访问/postJournal时，postJournal会被识别为/:id的参数值，直接命中第一个动态路由返回HomePage，永远不会执行后续的/postJournal路由匹配逻辑。
2. 重复路由配置：两个完全相同的path="/:id"路由同时存在，第一个匹配到HomePage后就会终止匹配，第二个DataByID路由永远不会被触发。
3. 冗余组件渲染：HomePage组件内直接硬编码渲染了<DataById/>组件，与路由配置的DataByID页面逻辑冲突。
4. 无效导入：从react-router-dom同时导入了Router和BrowserRouter，BrowserRouter本身就是封装好的Router实现，无需额外导入Router。

修复方案 #

1. 调整App.js路由配置

将固定路径路由前置，删除重复的动态路由，调整后代码如下：

import React from "react";
import "./style/App.css";
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route } from "react-router-dom";
import HomePage from "./components/homePage"
import PostJournalEntry from "./components/postJournalEntry"
import DataByID from "./components/dataById"

function App() {
  return (
    <div className="app">
      <BrowserRouter>
      <Switch>
        <Route path="/postJournal" exact component={PostJournalEntry}></Route>
        <Route path="/:id" exact component={DataByID}/>
        <Route path="/" exact component={HomePage}/>
      </Switch>
      </BrowserRouter>
    </div>
  );
}

2. 调整HomePage组件

删除组件内冗余的<DataById/>渲染、无效的usePrevious导入，调整后代码如下：

import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import Axios from "axios";
import HomePageListItems from "./homePageListItems";

export default function HomePage(props){
    const [getAllData, setGetAllData] = useState()
    const getData = async () => {
        await Axios.get("http://localhost:5000/get")
        .then((response)=>{
            setGetAllData(response.data)
        })
        .catch((error)=>{console.log(error)})
    }
    useEffect(()=>{
        getData();
    },[])
    return(
        <section>
          <Link to="/postJournal">Post Journal Entry</Link>
            {getAllData&&getAllData.map((item)=>{
                return(
                    <HomePageListItems
                    key={item.id}
                    idx={item.id}
                    name={item.name}
                    title={item.title}
                    journalEntry={item.journalEntry}
                    date={item.date}
                    file={item.file}
                    />
                )
            })}
        </section>
    )
}

优化建议 #

建议给动态参数路由加固定前缀，比如改为/data/:id，可以彻底避免后续新增一级固定路由时再次出现匹配冲突的问题。

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