Why will work in header but not on home page using React-Router-Dom?

Question

I am creating a website that is using React Router. All my links are working fine in the header but when I try to create a link on my home page it will not work. There must be a step I'm missing. Any help would be appreciated!

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: Here I have a link to the weather page that is not working. I'm confused as to why this same link will work on the header page but not on this one.

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;

Answer 1

You don't have a route with the path /Home/Weather so

<Link to="Weather"><h2>Check Weather</h2></Link>

won't work

You have /Weather route so

<Link to="/Weather"><h2>Check Weather</h2></Link>

or

<Link to="../Weather"><h2>Check Weather</h2></Link>

will work