英文:
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 statementsfunction 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 statementsfunction App(){<BrowserRouter><Routes><Route path="/" element={<Authentication/>}/><Route path="/app" element={<Container/>}/></Routes></BrowserRouter>}
Container.js
import ......... //some import statementsfunction 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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论