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"匹配，然后在其中放置仅管理员的NavBar。

您可以了解有关嵌套路由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。

使用react

1 个答案: