反応ルータの複数のページv4

Question

私はルーティングのために反応ルータv4を使用しています。私のアプリのレイアウトは、エンドユーザー向けのホームページがあります。明らかにホームページのパスは/です。ダッシュボードセクションもあります。 1つは管理者用、1つはエージェント用、もう1つは所有者用です。彼らは上から下に独自のレイアウトを持っています。ホームページのために働いています。しかし、私がURL /admin/dashboardを押すと、admin dasboardのメインページは表示されません。同じホームページが表示されます。ここで

は私が 以下でしたので、私は管理者のダッシュボードに今別のレイアウトを完全に新しいページのAppコンポーネントのない子供が欲しい

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私はAdminダッシュボードのページではなく、AdminDashboardの子である /commissionと同じアプリケーションページを取得します

どのように私のルータを異なるレイアウトで動作させることができますか？ユーザに応じMeteorchefベース、専用配線から

Answer 1

（この場合loggingInプロップ）、

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：

Public.jsは、唯一の非管理のために、そうでない場合にリダイレクトあなたのAppで、その後

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