使用 React Router 4.2 渲染侧边栏和其他组件

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

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

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

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

Answer 1

你有

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

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

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

试试看，让我知道结果如何。

使用 React Router 4.2 渲染侧边栏和其他组件

Rendering sidebar along with other components using react router 4.2

javascript

reactjs

react-router-v4