使用React Router Dom实现移动端多页面导航问题求助

问题分析 #

你遇到的路由匹配问题根源有三个：

• 路径拼写错误：FiltersSection中跳转的/mobilefilters与App中配置的/filters不匹配
• 绝对路径误用：MobileFilters中的NavLink使用/brand绝对路径，会匹配根路由下的/brand，但App未配置该路由
• 嵌套路由路径错误：FilterPage内的Routes使用绝对路径，无法基于当前/filters路径匹配子路由

修复步骤 #

1. 修正跳转路径拼写错误（FiltersSection组件）

将跳转目标改为App中实际配置的/filters路径：

<div className="md-hidden ">
    <div
        className=" text-xl flex items-center gap-4 w-44"
        onClick={() => navigate("/filters")} // 修正路径
    >
        Filters
        <BsFilterCircleFill />
    </div>
</div>

2. 使用相对路径配置NavLink（MobileFilters组件）

把绝对路径改为相对路径，这样会基于当前/filters路径自动拼接为/filters/brand和/filters/rating：

<div className="col-span-2 bg-slate-300 h-screen flex flex-col gap-y-2 text-lg ">
    <NavLink to="brand">Brand</NavLink> {/* 相对路径 */}
    <NavLink to="rating">Rating</NavLink> {/* 相对路径 */}
</div>

3. 调整FilterPage内的路由为相对路径

FilterPage在/filters路径下渲染，内部Routes需使用相对路径匹配子路由：

const FilterPage = () => {
    return (
        <div>
            <Routes>
                <Route path="brand" element={<Brand />} /> {/* 去掉开头的/ */}
                <Route path="rating" element={<Rating />} /> {/* 去掉开头的/ */}
                {/* 可选：添加默认路由，进入/filters时显示提示内容 */}
                <Route index element={<div>Select a filter category</div>} />
            </Routes>
        </div>
    );
};

4. （可选）优化为标准嵌套路由结构

如果希望直接访问/filters/brand或/filters/rating也能正常渲染，可以重构为React Router推荐的嵌套路由模式：

修改MobileFilters组件，用Outlet渲染子内容：

import { Outlet, useNavigate } from 'react-router-dom';

const MobileFilters = () => {
    const navigate = useNavigate();

    return (
        <>
            <div className="bg-orange-400 h-8 flex items-center ">
                <button className="ml-2" onClick={() => navigate(-1)}>
                    <BsArrowLeft className="text-2xl" />
                </button>
            </div>

            <div className="grid grid-cols-6">
                <div className="col-span-2 bg-slate-300 h-screen flex flex-col gap-y-2 text-lg ">
                    <NavLink to="brand">Brand</NavLink>
                    <NavLink to="rating">Rating</NavLink>
                </div>
                <div className="col-span-4 ">
                    <Outlet /> {/* 用Outlet替代FilterPage */}
                </div>
            </div>
        </>
    );
};

修改App组件的路由配置：

function App() {
    return (
        <div className="mb-5">
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/home" element={<Home />} />
                    <Route path="/form" element={<Form />} />
                    <Route path="/productsList/:cate" element={<ProductsList />} />
                    <Route path="/singleproduct/:id" element={<SingleProduct />} />
                    {/* 配置嵌套路由 */}
                    <Route path="/filters" element={<MobileFilters />}>
                        <Route index element={<div>Select a filter category</div>} />
                        <Route path="brand" element={<Brand />} />
                        <Route path="rating" element={<Rating />} />
                    </Route>
                </Routes>
            </BrowserRouter>
        </div>
    );
}

这种模式可以直接去掉FilterPage组件，路由结构更清晰，同时支持直接访问子路由路径。

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