response-router-dom: Как иметь несколько «оболочек» внутри коммутатора, каждый со своими собственными маршрутами? - PullRequest
Новая
       12

response-router-dom: Как иметь несколько «оболочек» внутри коммутатора, каждый со своими собственными маршрутами?

2 голосов
/ 04 ноября 2019

У меня есть ситуация, когда в моем приложении есть две основные «оболочки» для страниц. Первая оболочка предназначена для потока входа на страницы «unauth» (фоновое изображение, материал материал-интерфейс), а вторая оболочка является главной панелью управления (навигационная панель, боковая панель и т. Д.).

Следующий код - моя попытка упростить проблему, с которой я сталкиваюсь. Может кто-нибудь, пожалуйста, покажите мне, как правильно добиться этого с реагировать на маршрутизатор-дом? 

  <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>

Я получил эту попытку от другого поста StackOverflow здесь, но этот код выше НЕ работает. При переходе к / test1 Shell1 (просто div с надписью Shell1) НЕ отображается, а / test3 + / test4 вообще не работает.

Вот код codeSandbox, демонстрирующий: https://codesandbox.io/s/react-example-362ow

Заранее спасибо.

1 Ответ

1 голос
/ 04 ноября 2019

Как правило, вы хотите вложить маршруты типа , поэтому , где родительский компонент Route оборачивает дочерние элементы Route s.

Вот несколько примеров, где требуется аутентификация: https://codesandbox.io/s/yqo75n896x (с использованием состояния Redux) или https://codesandbox.io/s/5m2690nn6n (с использованием состояния React)

Рабочий пример:

Edit Nested Routes Example

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>
  );
}
...