javascript - React Router v4 中的多个页面

Question

我正在使用 React Router v4 进行路由。我的应用程序的布局是，有一个供最终用户使用的主页。首页的路径显然是/。还有仪表板部分。一名管理员，一名代理人，另一名业主。他们从上到下都有自己的布局。对于主页它的工作。但是当我点击 url /admin/dashboard 时，管理仪表板的主页未显示。显示相同的主页。

这是我所做的

const AsyncRoute = ({ load, ...others }) => (
  <Route
    {...others} render={(props) => (
      <Bundle load={load} {...props} />
  )}
  />
);

app.js

const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
    </Provider>,
    document.getElementById("app")
  );
};

import Routes from 'routes';
class App extends React.Component {
render() {
  return (
    <div>
      <Navbar userForm={this.handleDialog} />
      <Routes />
    </div>
  );
}
}

routes.js
function Routes({ location }) {
  return (
    <Switch location={location}>
      <AsyncRoute exact path="/" load={loadHomePage} />
      <AsyncRoute exact path="/features" load={loadFeaturePage} />
      <AsyncRoute path="" load={loadNotFoundPage} />
    </Switch>
  );
}

我现在想要管理仪表板一个具有不同布局的完整新页面，而不是应用程序组件的子级，所以我这样做了以下

class AdminDashboard extends React.Component {
  render() {
    return (
      <div>
        <TopNavigation />
        <SideNavigation />{/* it will have link */}
        <Routes /> {/* it will display page */}
      </div>
    );
  }
}

function AdminRoutes({ location }) {
  return (
        <Switch location={location}>
          <AsyncRoute
            exact
            path="/admin/dashboard"
            load={loadAdminDashboardPage}
          />
          <AsyncRoute exact path="/commission" load={loadCommissionPage} />
          <AsyncRoute path="" load={loadNotFoundPage} />
        </Switch>
  );
}

当我点击 url /admin/dashboard 时，我得到的是应用程序页面，而不是管理仪表板页面，与/commission 应该是 AdminDashboard 的子级

如何让我的路由器适用于不同的布局？

Answer 1

来自 Meteorchef Base，根据用户的专用路由(在本例中为 loggingIn 属性):

Public.js，仅适用于非管理员，如果没有则重定向:

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

const Public = ({ loggingIn, authenticated, component, ...rest }) => (
  <Route {...rest} render={(props) => {
    if (loggingIn) return <div></div>;
    return !authenticated ?
    (React.createElement(component, { ...props, loggingIn, authenticated })) :
    (<Redirect to="/account" />);
  }} />
);

Public.propTypes = {
  loggingIn: PropTypes.bool,
  authenticated: PropTypes.bool,
  component: PropTypes.func,
};

export default Public;

Authenticated.js，仅用于管理员，如果没有也重定向:

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

const Authenticated = ({ loggingIn, authenticated, component, ...rest }) => (
  <Route {...rest} render={(props) => {
    if (loggingIn) return <div></div>;
    return authenticated ?
    (React.createElement(component, { ...props, loggingIn, authenticated })) :
    (<Redirect to="/login" />);
  }} />
);

Authenticated.propTypes = {
  loggingIn: PropTypes.bool,
  authenticated: PropTypes.bool,
  component: PropTypes.func,
};

export default Authenticated;

然后在您的应用程序中(在本例中是无状态的，但您也可以创建一个类):

// import everything

const App = appProps => (
  <Router>
      <div>
        <Switch>
          <Route exact name="index" path="/" component={Home} />
          <Authenticated exact path="/account" component={Account} {...appProps} />
          <Public path="/signup" component={Signup} {...appProps} />
          <Public path="/login" component={Login} {...appProps} />
          <Route component={NotFound} />
        </Switch>
      </div>
  </Router>
);

App.propTypes = {
  loggingIn: PropTypes.bool,
  authenticated: PropTypes.bool,
};