Question

我正在使用react router v4进行路由。我的应用程序的布局，有最终用户的主页。主页的路径显然是/。还有仪表板部分。一个用于管理员，一个用于代理，另一个用于所有者。它们从上到下都有自己的布局。对于主页它的工作。但是，当我点击网址/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>
  );
}

我现在想要管理仪表板一个完整的新页面，不同的布局，而不是App组件的子项，所以我做了以下

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

当我点击网址/admin/dashboard时，我得到的应用页面不是管理信息中心页面，而是与之相同 /commission应该是AdminDashboard的孩子

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

Answer 1

来自Meteorchef Base，根据用户（在这种情况下为loggingIn prop）进行专用路由：

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,
};

反应路由器v4中的多个页面

1 个答案: