Javascript 使用react构建独立管理路由器

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

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

有没有办法做到这一点

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;

从“React”导入React；
从“react Router dom”导入{Router，Route，Switch}；
从“历史记录/createBrowserHistory”导入createBrowserHistory；
从“../ui/登录页/登录页”导入登录页；
从“../ui/App”导入应用程序；
从“../ui/NotFoundPage”导入NotFoundPage；
从“../ui/NavBar”导入导航栏；
从“../ui/Footer”导入页脚；
从“../ui/FaqPage”导入FaqPage；
从“../ui/PrivacyPage”导入PrivacyPage；
从“../ui/LegalNoticePage”导入LegalNoticePage；
const browserHistory=createBrowserHistory（）；
导出常量审批器=（）=>(
);
导出默认批准程序；

你的

不是围绕着你的

，而是围绕着你的路线。因为你可以嵌套路由器，你可以有一个

匹配所有

路径=“/admin”

，然后在里面放一个只有管理员的导航栏

您可以阅读有关嵌套管线的更多信息

下面是一个代码示例：

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

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Switch，Route}；
常量Admin=（{match}）=>(
管理栏
一}/>
两个}/>
);
常量其他=（{match}）=>(
其他酒吧
一}/>
两个}/>
);
常量应用=（）=>(
);
const rootElement=document.getElementById（“根”）；
ReactDOM.render（.
thank you@Colin这很有趣。但是，我希望我的管理界面有自己的管理导航栏，但不在任何管理路由上渲染应用程序的导航栏。如果我错了，请告诉我，但是嵌套路由，它们在您提供的链接上的显示方式，不允许只使用管理导航栏，也不渲染应用程序的导航栏是的，你只有两条独立的顶级路线。