Как правило, вы хотите вложить маршруты типа , поэтому , где родительский компонент Route
оборачивает дочерние элементы Route
s.
Вот несколько примеров, где требуется аутентификация: 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>
);
}