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

【问题标题】：Why is the routing not working in react.js?为什么路由在 react.js 中不起作用？
【发布时间】：2021-10-18 00:01:26
【问题描述】：

我知道这个非常基本的问题，是的，在将其发布到此处之前，我已经查看了 Google。解决方案通常是一些错字，缺少“确切”关键字，没有包装在 BrowserRouter 中，没有导入一些东西。但这些都不适用于我的情况。它可能很小，但我想不通，这让我有点靠墙了。

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>
        
    )
}

提前感谢大家！任何帮助表示赞赏

【问题讨论】：

Switch 的目的是使用第一个匹配的路由，仅此而已。带有/postJournal 的url 将匹配/:id 并因此呈现主页，并且只呈现主页。您是否打算以不同的顺序渲染您的路线？还是您的意思是不使用 Switch？

标签： reactjs routes react-router react-router-dom

【解决方案1】：

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

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

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

【讨论】：

成功了，非常感谢！！