React-Router-Dom中<Link>在Header可用但Home页面失效问题求助

开发使用React Router的网站时，Header组件内的所有<Link>链接都能正常跳转，但在Home页面添加的<Link>（比如跳转到Weather页面的链接）完全无法生效，求排查解决。

App组件代码 #

import React, { useEffect } from "react";
import { useState } from 'react';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"
import Header from './Header';
import MilesForm from "./MilesForm";
import Weather from './Weather';
import PaceCalculator from "./PaceCalculator";
import WeeklyGoal from "./WeeklyGoal";
import Home from "./Home";

const getGoal = JSON.parse(localStorage.getItem('goal') || "[]");

const App = () => {
  const [goal, setGoal] = useState(getGoal);
  const [milesToGo, setMilesToGo] = useState();

  const handleChange = (e) => {
    setGoal(e.target.value)
  }
  const handleSubmit = (e) => {
    e.preventDefault();
    setMilesToGo(goal)
    localStorage.setItem('goal', goal)
    window.location.reload();
  }

  return (
    <BrowserRouter>
      <div>
        <Header />
        <Routes>
          {/* <Route path="/" element={<Home />} /> */}
          <Route path="Home" element={<Home />} />
          <Route path="WeeklyGoal" element={[ 
            <WeeklyGoal
              handleChange={handleChange}
              handleSubmit={handleSubmit}
              goal={goal}
            />,            
            <MilesForm
              goal={goal}
              milesToGo={milesToGo}
              setMilesToGo={setMilesToGo}
              path="./MilesForm"
            />
]} />
          <Route path="Weather" element={<Weather />} />
          <Route path="Pace" element={<PaceCalculator />} />
        </Routes>        
      </div>
    </BrowserRouter>
  );
};

export default App;

Header组件代码 #

import React from "react";
import './css/header.css';
import { Link } from 'react-router-dom';
import { useState } from 'react';

const Header = () => {
    const [burger, setBurger] = useState(true)
    const handleToggle = () => {
        { burger ? setBurger(false) : setBurger(true) }
    }
    return (
        <div className="header-style">
            <h1 className="header-title">3-2run</h1>
            <button className="burger-btn" onClick={handleToggle}>
                <p></p>
                <p></p>
                <p></p>
            </button>
            <div
              className={burger === false
                ? "menu-container"
                : "hide-menu-container"
              }
            >
                <ul>
                    <li><Link to="Home">Home</Link></li>
                    <li><Link to="WeeklyGoal">Track your miles</Link></li>
                    <li><Link to="Weather">Weather</Link></li>
                    <li><Link to="Pace">Pace Calculator</Link></li>
                </ul>
            </div>
        </div>
    )
}

export default Header;

Home组件代码（其中跳转到Weather的无法工作） #

import React from 'react';
import './css/home.css';
import { Link } from 'react-router-dom'

const Home = () => {
    return (
        <div className='home-container'>
            <div className='track-miles-link'>
                <h2>Track Your Miles</h2>
            </div>

            <div className='get-weather'>
                <Link to="Weather"><h2>Check Weather</h2></Link>
            </div>

            <div className='get-pace'>
                <h2>Pace Calculator</h2>
            </div>
        </div>
    )
}

export default Home;

解决方法 #

问题根源是相对路径与绝对路径的区别：

• Header组件挂载在根路由层级下，此时<Link to="Weather">会被解析为绝对路径/Weather，和路由配置匹配，所以能正常跳转。
• Home组件挂载在/Home路径下，此时<Link to="Weather">会被解析为相对路径/Home/Weather，但你的路由配置里没有这个路径，所以跳转无效。

具体修改步骤： #

1. 统一使用绝对路径：所有<Link>的to属性前加上/，确保跳转指向根路由下的路径：

   • Header组件修改：

     <li><Link to="/Home">Home</Link></li>
     <li><Link to="/WeeklyGoal">Track your miles</Link></li>
     <li><Link to="/Weather">Weather</Link></li>
     <li><Link to="/Pace">Pace Calculator</Link></li>
     

   • Home组件修改：

     <div className='get-weather'>
         <Link to="/Weather"><h2>Check Weather</h2></Link>
     </div>
     

2. 同步修改路由配置：将App组件中Routes内的path也改为绝对路径形式（加上/）：

   <Routes>
     <Route path="/" element={<Home />} /> {/* 推荐保留根路由，作为默认首页 */}
     <Route path="/Home" element={<Home />} />
     <Route path="/WeeklyGoal" element={[ 
       <WeeklyGoal
         handleChange={handleChange}
         handleSubmit={handleSubmit}
         goal={goal}
       />,            
       <MilesForm
         goal={goal}
         milesToGo={milesToGo}
         setMilesToGo={setMilesToGo}
         path="./MilesForm"
       />
     ]} />
     <Route path="/Weather" element={<Weather />} />
     <Route path="/Pace" element={<PaceCalculator />} />
   </Routes>
   

3. 优化体验：建议保留根路由path="/"指向Home组件，这样用户访问网站默认进入首页，无需手动输入/Home。

完成以上修改后，所有<Link>都能正常跳转。

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