我无法正确构建 React 路由

Question

我正在使用 MERN 堆栈开发一个 Twitter 克隆，无法全神贯注于路由，让我再解释一下，我希望登录页面的设计与整个应用程序分开，所以我使用 styled-components 并使用主题提供程序包装登录页面、其他页面和两个侧边栏，如下所示。

return (
<ThemeProvider theme={theme}>
  <Provider store={store}>
    <GlobalStyles />
    <MainStyle>
      <Router>
        {window.location.pathname !== "/" && <LeftPanel />}
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/home" element={<Home />} />
          <Route path="/user" element={<User />} />
        </Routes>
      </Router>
      {window.location.pathname !== "/" && <RightPanel />}
    </MainStyle>
    {window.location.pathname !== "/" && <MobileBar />}
  </Provider>
</ThemeProvider>

你可能想知道为什么我添加 window.location.pathname 好吧，我需要检查这是否是登录页面所以我不包括侧边栏因为我只希望侧边栏在 NOT 登录页面，在我开始身份验证过程之前工作了一段时间，但我的技巧没有按预期工作，两个侧边栏不会显示，其他一些 CSS 也没有正常工作，所以我决定改为将结构更改为...

return (
<ThemeProvider theme={theme}>
  <GlobalStyles />
  <Router>
    <Routes>
      <Route path="/" element={<LoginPage />} />
      <Route path="/app/*" element={<RestOfApp />} />
    </Routes>
  </Router>
</ThemeProvider>

我在上面所做的是创建了一个嵌套路由，这样我就可以将所有页面与登录页面分开，并按照我想要的方式设置它们的样式，下面是 RestOfApp 组件的外观...

<>
  <MainStyle>
    <LeftPanel />
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/user" element={<User />} />
    </Routes>
    <RightPanel />
  </MainStyle>
  <MobileBar />
</>

现在回家的路线变成了 /app/home 而不是 /home 这让我很不安 :( 但嘿，至少它奏效了，但不幸的是这不是完美的解决方案。

我知道这看起来很愚蠢 :D 但这是我能想到的最好的办法，幸运的是这解决了我的问题，但我觉得有更好的方法，但是，该解决方案并不完美我一直在 chrome 检查元素，如 未找到图像 。

background.png:1          GET http://localhost:3000/app/background.png 404 (Not Found)

这是登录页面的背景图片:(

有没有更好的方法来构建我的应用程序？！

提前致谢。

Answer 1

React Router 具有“布局路由”的概念，它允许您将一组路由包装在一个通用布局中，而不会影响 URL 的结构。对于您的应用，这可能看起来像这样：

<Routes>
  <Route path="/" element={<LoginPage />} />
  <Route element={<AppLayout />}>
    <Route path="/home" element={<Home />} />
    <Route path="/user" element={<User />} />
  </Route>
</Routes>

然后，在您的 AppLayout 组件中，您可以呈现一个 <Outlet> 组件，该组件将被嵌套路由（例如 home 或 user）替换。

import { Outlet } from 'react-router-dom'

function AppLayout() {
  return (
    <>
     <MainStyle>
       <LeftPanel />
       <Outlet />
       <RightPanel />
     </MainStyle>
     <MobileBar />
    </>
  )
}

查看 React Router docs 了解有关布局路线的更多详细信息。

我无法正确构建 React 路由

I can't structure React Routes properly

reactjs

react-redux

mern

styled-components