javascript - 使用 React 构建独立的管理路由器

Question

我已经构建了一个具有特定路由器的应用程序。现在我想通过编写管理界面来改进我的应用程序。问题是，我的路线周围有组件(导航栏和页脚)(请参见下面的代码)。因此，如果我只是创建一个管理界面并将其嵌套在现有路由器中，我的应用程序的导航栏和页脚将显示在管理页面上。

我想用自己的导航栏和组件编写我的管理界面。

有办法做到吗？

AppRouter.js:

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

import LandingPage from '../ui/landing-page/LandingPage';
import App from '../ui/App';
import NotFoundPage from '../ui/NotFoundPage';
import NavBar from '../ui/NavBar';
import Footer from '../ui/Footer';
import FaqPage from '../ui/FaqPage';
import PrivacyPage from'../ui/PrivacyPage';
import LegalNoticePage from '../ui/LegalNoticePage';

const browserHistory = createBrowserHistory();

export const AppRouter = () => (
  <Router history={browserHistory}>
    <div>
      <NavBar />
      <Switch>
        <Route exact path="/" component={LandingPage}/>
        <Route exact path="/meals" component={App}/>
        <Route exact path="/faq" component={FaqPage}/>
        <Route exact path="/privacy" component={PrivacyPage}/>
        <Route exact path="/legal_notice" component={LegalNoticePage}/>
        <Route component={NotFoundPage}/>
      </Switch>
      <Footer />
    </div>
  </Router>
);

export default AppRouter;

Answer 1

您的<NavBar />不在您的<Router>周围，它围绕着您的路线。由于您可以嵌套路由器，因此您可以拥有 <Route>匹配所有 path="/admin"然后在其中放置仅限管理员的导航栏。

您可以阅读有关嵌套路由的更多信息 here .

这是一个代码示例:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";

const Admin = ({ match }) => (
  <React.Fragment>
    <h1>admin bar</h1>
    <Route path={`${match.path}/1`} render={() => <h2>one</h2>} />
    <Route path={`${match.path}/2`} render={() => <h2>two</h2>} />
  </React.Fragment>
);

const Other = ({ match }) => (
  <React.Fragment>
    <h1>other bar</h1>
    <Switch>
      <Route path={`${match.path}/2`} render={() => <h2>one</h2>} />
      <Route path={`${match.path}/2`} render={() => <h2>two</h2>} />
    </Switch>
  </React.Fragment>
);

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Route path="/other" component={Other} />
    </Switch>
  </BrowserRouter>
);

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

并附有CodeSandbox .