设置仪表板和子组件的路由

Question

我有一个简单的 React 仪表板，可以获取品牌数据并向用户显示品牌选项。仪表板有两个主要组件仪表板和结果。结果是仪表板的子组件，显示所选品牌的页面名称。它依赖于几个 props 来运行。我想通过利用

react-router-dom

来实现深度链接，但我遇到了一些麻烦。每次我将 URL 复制/粘贴到另一个窗口时，我都会被路由到仪表板而不是结果。 URL结构是这样的，

localhost:5173/{brand}/{pageName}

.

我的路线设置正确吗？我有嵌套的路线，因为仪表板必须提取数据以获得结果。也许，我的做法完全错误，但我唯一的目标是设置深层链接，以便我可以与其他用户共享我的应用程序中的 URL。

例如，如果我导航到 http://localhost:5173/，我将看到品牌列表（brandA、brandB、brandC 等）。选择品牌后，我将导航到 http://localhost:5173/brand。然后我会看到可供选择的页面列表。选择页面后，我会导航到 http://localhost:5173/brand/page。此时一切都很好并且呈现出预期的效果。但是，如果我将 URL http://localhost:5173/brand/page> 复制并粘贴到新窗口中，我将被路由到默认仪表板，而不是特定于品牌的结果。

function App() {
  const [selectedBrand, setSelectedBrand] = useState<SiteData | null>(null)

  return (
    <Context.Provider value={selectedBrand}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Dashboard />}>
            <Route path="/:brand/*" element={<Results />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Context.Provider>
  )
}

export default App

Answer 1

由于最初的问题还不太清楚预期的输出应该是什么样子，因此这里有两个选项在任何情况下都适合您：

情况 1： 如果您想查看在

<Dashboard />

路径处渲染的

/

组件以及在

<Results />

路径处渲染的

/:brand/*

组件，且输出中不包含

<Dashboard />

，请使用以下路线设置：

<Route path="/" element={<Dashboard />} />
<Route path="/:brand/*" element={<Results />} />

案例2：

如果您想查看在

<Dashboard />

 路径处渲染的 

/

 组件以及在 

<Results />

 路径 

处渲染的

/:brand/*

组件作为 <Dashboard />

 组件

的一部分，请使用以下路由设置：

<Route path="/" element={<Dashboard />}>
  <Route path="/:brand/*" element={<Results />} />
</Route>

同时确保<Dashboard />

组件有一个

<Outlet />

组件来渲染嵌套路由元素：

function Dashboard() {
  return (
    <div>
      Dashboard
      <Outlet />
    </div>
  );
}

参考资料：

出口