react-router-dom v6点击链接地址栏变化但未跳转至目标页面求助

问题现象 #

从首页跳转至Subscription页面功能正常，但点击Subscription页面中的Mounth链接时，仅地址栏更新为localhost:3000/subscription/Mounth，Mounth页面却未渲染。

相关代码 #

Root.jsx #

import { Route, Routes } from "react-router-dom"
import Layout from "../Layout/Layout"
import Main from "../Main/main"
import Subscription from "../Subscription/subscription"
import Mounth from "../Subscription/Mounth"

function Root(){
    return(
        <>
          <Routes>
            <Route element={<Layout/>}>
                <Route path="/" element={<Main/>}/>
                <Route path="subscription" element={<Subscription/>}>
                 <Route path="Mounth" element={<Mounth/>}/>
                </Route>
            </Route>
          </Routes>
        </>
    )
}

export default Root

Subscription.jsx #

import { Link } from "react-router-dom"
import { Outlet } from "react-router-dom"
function Subscription(){
    return(
        <>
            <Outlet /> 
       
            <div className="main-content">
            <div className="container-primary">
                <div className="subscription-primary">
          
                    <form className="search-bar">
                        <input placeholder="Поиск" className="search-bar__input"/>
                    </form>
                    <h1 className="primary-title">Subscription</h1>
                    <h2 className="subscription-primary__title">Choose:</h2>
                    <ul className="subscription-primary__list">
                        <li className="subscription-primary__item">
                            <Link className="subscription-primary__link" to="Mounth">
                                <div className="subscription-primary__bg">
                                    <span className="subscription-primary__mounth">1 month</span>
                                    <h3 className="subscription-primary__price">
                                        2499 ₽
                                    </h3>
                                </div>
                            </Link>
                        </li>
                    </ul>
          
                    <div className="promo">
                        <form className="promo__form" action="">
                            <input type="text" placeholder="" className="promo__field"/>
                            <button type="submit" className="promo__btn primary-btn">Accept</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </>
    )
}

问题原因及解决方案 #

路由结构本身是正确的，但**<Outlet />的位置导致Mounth页面内容被后续元素覆盖，或者显示位置不符合预期**，以下两种方案可解决问题：

方案1：调整Outlet位置（保留Subscription布局，嵌入子页面内容） #

如果希望Mounth页面在Subscription的布局框架内展示，把<Outlet />移动到你想要显示子内容的区域，比如订阅选项下方：

function Subscription(){
    return(
        <>
            <div className="main-content">
            <div className="container-primary">
                <div className="subscription-primary">
                    <form className="search-bar">
                        <input placeholder="Поиск" className="search-bar__input"/>
                    </form>
                    <h1 className="primary-title">Subscription</h1>
                    <h2 className="subscription-primary__title">Choose:</h2>
                    <ul className="subscription-primary__list">
                        <li className="subscription-primary__item">
                            <Link className="subscription-primary__link" to="Mounth">
                                <div className="subscription-primary__bg">
                                    <span className="subscription-primary__mounth">1 month</span>
                                    <h3 className="subscription-primary__price">
                                        2499 ₽
                                    </h3>
                                </div>
                            </Link>
                        </li>
                    </ul>
                    {/* 将Outlet移至此处，Mounth内容会显示在订阅选项和优惠码区域之间 */}
                    <Outlet />
                    <div className="promo">
                        <form className="promo__form" action="">
                            <input type="text" placeholder="" className="promo__field"/>
                            <button type="submit" className="promo__btn primary-btn">Accept</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </>
    )
}

方案2：将Mounth设为独立路由（点击后替换Subscription页面） #

如果希望点击Mounth链接后完全替换Subscription页面内容，调整路由结构，将Mounth设为Layout的直接子路由：

// Root.jsx 修改后的代码
function Root(){
    return(
        <>
          <Routes>
            <Route element={<Layout/>}>
                <Route path="/" element={<Main/>}/>
                <Route path="subscription" element={<Subscription/>}/>
                {/* 将Mounth路由改为Layout的直接子路由 */}
                <Route path="subscription/Mounth" element={<Mounth/>}/>
            </Route>
          </Routes>
        </>
    )
}

同时更新Subscription中的Link为绝对路径：

<Link className="subscription-primary__link" to="/subscription/Mounth">

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