为什么路由在 react.js 中不起作用？

Question

我知道这个非常基本的问题，是的，在将其发布到这里之前，我已经查阅了 Google。解决方案通常是一些拼写错误，缺少“精确”关键字，没有包装在 BrowserRouter 中，没有导入某些东西。但它的 none 适用于我的情况。它可能是一些小东西，但我无法理解它并且让我在这里有点靠墙。

postJournal 路由不起作用。我看到它 URL 但它没有带我到页面。有趣的是它工作得很好，我用 /:id 添加了一些其他路由，从那以后它就停止工作了。

路线是：

import React from "react";
import "./style/App.css";
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Router, 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="/:id" exact component = {HomePage}/>
      <Route path="/:id" exact component = {DataByID}/>
      <Route path="/postJournal" exact component = {PostJournalEntry}></Route>
      <Route path="/" exact component = {HomePage}/>
      </Switch>
      </BrowserRouter>
    </div>
  );
}

--

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

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}
                    />
                )
            })
            
        }
         {usePrevious}
        <DataById/>
        </section>
        
    )
}

在此先感谢大家！感谢任何帮助

Answer 1

您的代码中的问题是顺序：

<Route path="/:id" exact component = {HomePage}/>
<Route path="/:id" exact component = {DataByID}/>
<Route path="/postJournal" exact component = {PostJournalEntry}></Route>

如果您按此顺序编写这些路由，您的 /postJournal 将永远无法到达，因为 /postJournal 将匹配为 /:id。只需更改顺序，将 /postJournal 移到第一个，一切都会正常

为什么路由在 react.js 中不起作用？

Why is the routing not working in react.js?

routes

reactjs

react-router

react-router-dom