react-router-dom：如何在 Switch 中有多个“shell”，每个都有自己的路由？

Posted 2023-02-22

【中文标题】react-router-dom：如何在 Switch 中有多个“shell”，每个都有自己的路由？

【英文标题】：react-router-dom: How to have multiple 'shells' within Switch each with their own routes?

【发布时间】：2020-02-29 07:57:44

【问题描述】：

我的应用中有两个主要的页面“shell”。第一个 shell 用于“unauth”页面登录流程（背景图片、material-ui 纸），第二个 shell 是主仪表板（导航栏、侧边栏等）。

以下代码是我尝试简化遇到的问题。有人可以告诉我如何使用 react-router-dom 正确实现这一点吗？

  <BrowserRouter>
    <Switch>
      <Route component=Shell1>
        <Route path="/test1" exact component=() => <div>Test 1</div> />
        <Route path="/test2" exact component=() => <div>Test 2</div> />
      </Route>
      <Route component=Shell2>
        <Route path="/test3" exact component=() => <div>Test 3</div> />
        <Route path="/test4" exact component=() => <div>Test 4</div> />
      </Route>
    </Switch>
  </BrowserRouter>

我从another *** post 得到了这个尝试，但是上面的代码不起作用。导航到 /test1 时，Shell1（只是一个显示 Shell1 的 div）不显示，并且 /test3 + /test4 根本不起作用。

这是一个代码沙盒演示：https://codesandbox.io/s/react-example-362ow

提前致谢。

【问题讨论】：

你真的需要这个开关吗？ A <Switch> looks through its children <Route>s and renders the first one that matches the current URL.

@artm 在没有开关的情况下进行了测试，仍然没有看到渲染的 Shell。我实际上认为没有开关，两个 shell 都可能被渲染，但事实并非如此。

【参考方案1】：

基本上你会想要嵌套类似so 的路由，其中​​父组件Route 包裹子Routes。

以下是一些需要身份验证的示例：https://codesandbox.io/s/yqo75n896x（使用 Redux 状态）或https://codesandbox.io/s/5m2690nn6n（使用 React 状态）

工作示例：

---

index.js

import ReactDOM from "react-dom";
import React,  Fragment  from "react";
import  BrowserRouter, Route, Switch, Link  from "react-router-dom";
import Shell1 from "./shell1";
import Shell2 from "./shell2";

function NavBar() 
  return (
    <Fragment>
      <Link to="/shell1/test1">Test1</Link>
      <br />
      <Link to="/shell1/test2">Test2</Link>
      <br />
      <Link to="/shell2/test3">Test3</Link>
      <br />
      <Link to="/shell2/test4">Test4</Link>
    </Fragment>
  );


function App() 
  return (
    <BrowserRouter>
      <div>
        <NavBar />
        <Route path="/shell1" component=Shell1 />
        <Route path="/shell2" component=Shell2 />
      </div>
    </BrowserRouter>
  );


ReactDOM.render(<App />, document.getElementById("root"));

shell1.js

import React from "react";
import  Route, Switch  from "react-router-dom";

export default function Shell1( match ) 
  return (
    <div>
      <div>Shell 1</div>
      <Switch>
        <Route
          exact
          path=`$match.url/test1`
          component=() => <div>Test 1</div>
        />
        <Route
          exact
          path=`$match.url/test2`
          component=() => <div>Test 2</div>
        />
      </Switch>
    </div>
  );

shell2.js

import React from "react";
import  Route, Switch  from "react-router-dom";

export default function Shell2( match ) 
  return (
    <div>
      <div>Shell 2</div>
      <Switch>
        <Route
          exact
          path=`$match.url/test3`
          component=() => <div>Test 3</div>
        />
        <Route
          exact
          path=`$match.url/test4`
          component=() => <div>Test 4</div>
        />
      </Switch>
    </div>
  );

【讨论】：

感谢您的回复。是否有一种方法可以在不要求 URL 字符串包含 /shell1 和 /shell2 的情况下执行此操作？我考虑过让所有经过身份验证的路由（第一个 shell）以 /auth 开头，其他路由以 /unauth 开头，但我认为这并不理想。

@Jaked222 这样可以吗？只是马特代码的一个分支codesandbox.io/s/nested-routes-example-ghxsv

@Jaked222 - 我得考虑一下。我知道你可以创建一个带有上下文或 redux 状态的 HOC 包装器，并根据某种变量有条件地渲染一个路由。但是，我倾向于避免使用 HOC 包装器。不管怎样，你可以在这里找到一个类似的例子：***.com/a/44854959/7376526（第一个例子——其中一个 HOC 包装了组件路由组件）。