Question

我无法呈现一些嵌套路由以保持在我的所有应用程序中呈现组件。

这是我的路由器组件：

const configRouter = (history: Object) => {
  return () =>
    <ConnectedRouter history={ history }>
      <div>
        <Route exact path="/" component={ LoginView }/>
        <Route exact path="/dashboard" component={ UserIsAuthenticated(DashboardView) }/>
        <Route path="/map" component={ Map }/>
        <Route path="/sandbox" component={ SandboxView }/>
      </div>
    </ConnectedRouter>
};

在DashboardView内，有一个侧栏我想随时保留。

// @flow
import React from 'react';
import { connect } from 'react-redux';
import { actions as jwtActions } from 'nozzmo-redux-jwt';
import styles from './dashboard.css'
import { Route } from 'react-router';
import MyView from '../../../components/MyView';
import {
  MdMap,
  MdEvent,
  MdDirections,
  MdGroup,
  MdSettings,
  MdAssignment
} from 'react-icons/lib/md';

import Sidebar, {
  SidebarLink,
  SidebarGroup,
  SidebarAvatar
} from '../../Sidebar';


type DashboardViewPropTypes = {
  children: Object
};


class DashboardView extends React.Component<DashboardViewPropTypes> {
  render() {
    // const { match } = this.props;
    return (
      <div className={ styles.dashboard }>
          <Sidebar>
              <SidebarGroup position='top'>
                  <SidebarAvatar
                      pictureURL='https://i0.wp.com/www.sardiniauniqueproperties.com/wp-content/uploads/2015/10/square-profile-pic.jpg'
                      to='/courses'
                      badgeCount={ 10 }
                  />
                  <SidebarLink
                      Icon={ MdMap }
                      to='/route'
                      badgeCount={ 0 }
                  />
                  <SidebarLink
                      Icon={ MdDirections }
                      to='/courses'
                      badgeCount={ 0 }
                  />
                  <SidebarLink
                      Icon={ MdEvent }
                      to='/courses'
                      badgeCount={ 2 }
                  />
                  <SidebarLink
                      Icon={ MdGroup }
                      to='/courses'
                  />
                  <SidebarLink
                      Icon={ MdAssignment }
                      to='/courses'
                      badgeCount={ 0 }
                  />
              </SidebarGroup>
              <SidebarGroup position='bottom'>
                  <LogoutLink />
                  <SidebarLink
                      Icon={ MdSettings }
                      to='/courses'
                      badgeCount={ 0 }
                  />
              </SidebarGroup>
          </Sidebar>

          <Route path={'/myview'} component={ MyView } />

      </div>

    );
  }
}

export default DashboardView;

const LogoutLink = connect(
    () => ({}),
  dispatch => ({
    onClick() {
      dispatch(jwtActions.logout());
    }
  })
)(({ onClick }) => <button onClick={ onClick }>{ 'Logout' }</button>);

我希望当我在浏览器的网址上输入/ myview时，Sidebar组件会继续在屏幕上呈现，而且我还会在屏幕上呈现MyView组件。

然而，当我输入/ myview时，我只得到一个空白屏幕，甚至连侧边栏都没有呈现。

谁能告诉我我做错了什么？

Answer 1

你有

 <Route path={'/myview'} component={ MyView } />

如果要渲染MyView组件，它应该是

<Route path={'/dashboard/myview'} component={ MyView } />

试一下，让我知道它是怎么回事。

使用反应路由器4.2渲染侧栏以及其他组件

1 个答案: