英文:
Unable to structure React Router efficiently
问题
我正在开发一个ReactJS项目，其中我使用了React Router。我有多个组件需要渲染，但不确定如何组织它。我没有得到预期的结果。
组件
- Authentication（身份验证）
- SideBar（侧边栏）
- List（列表）
- Detail（详情）
App.js（应用程序主文件）
import .....
.... //一些导入语句
function App(){
<BrowserRouter>
<SideBar/>
<Routes>
<Route path="/" element={<List/>}/>
<Route path="/detail" element={<Detail/>}/>
<Route path="/authentication" element={<Authentication/>}/>
</Routes>
</BrowserRouter>
}
在这里，我有4个组件。侧边栏组件将在Detail和List组件中共享，但我不希望在Authentication组件中可见。
尝试使用Outlet
App.js（应用程序主文件）
import .....
.... //一些导入语句
function App(){
<BrowserRouter>
<Routes>
<Route path="/" element={<Authentication/>}/>
<Route path="/app" element={<Container/>}/>
</Routes>
</BrowserRouter>
}
Container.js（容器组件）
import .....
.... //一些导入语句
function Container(){
<SideBar/>
<Routes>
<Route path="/list" element={<List/>}/>
<Route path="/detail" element={<Detail/>}/>
</Routes>
}
现在的问题是，当我导航到http://<域名>/app时，它显示一个带有侧边栏的空白页面，这没有实际用途。
如何实现这一目标？
英文:
I am working on a reactjs project where I utilize react-router. I have multiple components to render, but not sure how to structure it. I am not getting expected results
Components
- Authentication
- SideBar
- List
- Detail
App.js
import .....
.... //some import statements
function App(){
<BrowserRouter>
<SideBar/>
<Routes>
<Route path="/" element={<List/>}/>
<Route path="/detail" element={<Detail/>}/>
<Route path="/authentication" element={<Authentication/>}/>
</Routes>
</BrowserRouter>
}
Here I have totally 4 components. The sidebar component will be common for both Detail and List component, & I don't want it to be visible for Authentication component.
Tried using the Outlet
App.js
import .....
.... //some import statements
function App(){
<BrowserRouter>
<Routes>
<Route path="/" element={<Authentication/>}/>
<Route path="/app" element={<Container/>}/>
</Routes>
</BrowserRouter>
}
Container.js
import .....
.... //some import statements
function Container(){
<SideBar/>
<Routes>
<Route path="/list" element={<List/>}/>
<Route path="/detail" element={<Detail/>}/>
</Routes>
}
Now the issue is when I navigate to http://<domain>/app it is showing a blank page with sidebar, which doesn't serve a purpose.
How this can be achieved ?
答案1
得分: 1
我相信这是一个可行的解决方案：
- 侧边栏保留在 Layout 组件中，该组件使用了来自 react-router-dom 的 Outlet
- 在没有使用 Layout 的情况下首先使用您的身份验证路由
- 另外两个路由“包含”在 Layout 组件中，因此这些页面具有侧边栏
App.js
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Authentication />} />
<Route path="/" element={<Layout />}>
<Route path="/list" element={<List />} />
<Route path="/detail" element={<Detail />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;
export function Layout () {
return (
<div>
<div className="container">
<Sidebar />
<Outlet />
</div>
</div>
)
}
注意：解决方案几乎直接取自这个其他问题。
英文:
I believe this is a working solution:
- The sidebar is kept in the Layout component which uses the Outlet from react-router-dom
- Having your auth route first without using the Layout
- The other two routes are "contained" within the Layout component so these pages have the Sidebar
App.js
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Authentication />} />
<Route path="/" element={<Layout />}>
<Route path="/list" element={<List />} />
<Route path="/detail" element={<Detail />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;
export function Layout () {
return (
<div>
<div className="container">
<Sidebar />
<Outlet />
</div>
</div>
)
}
Note: Solution taken almost directly from This other question
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论