在我提供指定的页面路径时，React 路由器不呈现指定的页面路径答案

【问题标题】：React router not rendering specified page path while I providing it在我提供指定的页面路径时，React 路由器不呈现指定的页面路径
【发布时间】：2023-01-14 22:52:25
【问题描述】：

我在 React 中的路由器有点问题。我有 2 个组件：Main 和 Compose。

当我转到mysite.com/时，只渲染Main（这很好），但是当我转到mysite.com/compose时，只渲染Main，不渲染Compose。当你在/compose 时，我希望两者都能呈现。

我该如何解决这个问题？

return (
    <>
        <LeftSidebar />
        <div className="content">
            <Routes>
                <Route path="/" element={<Main />}>
                    <Route index element={<Main />} />
                    <Route path="compose" element={<Compose />} />
                </Route>
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="*" element={ <h1>Not found (404)</h1> } />
            </Routes>
        </div>
        <RightSidebar />
    </>
);

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

编辑这个

<Route path="compose" element={<Compose />} />

到

<Route path="/compose" element={<Compose />} />

【讨论】：

【解决方案2】：

我认为这种方式可以修复错误

return (
    <>
        <LeftSidebar />
        <div className="content">
            <Routes>
                <Route path="/" element={<Main />}>
                <Route path="/compose" element={<Compose />} />
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="*" element={ <h1>Not found (404)</h1> } />
            </Routes>
        </div>
        <RightSidebar />
    </>
);

【讨论】：

【解决方案3】：

我认为这就是你想要实现的目标。

<Routes>
<Route path="/" element={<Main />}>
<Route path="/compose" element={<Compose />} /> 
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="*" element={ <h1>Not found (404)</h1> } />
</Routes>

但如果你真的想同时展示 uner /compose

<Route path="/compose" element={<><Main/><Compose/></>} />

【讨论】：