所有路由上的组件呈现 - 路由器V3的反应

Question

我正在尝试使用一些参数创建一些嵌套路由，并在某个路径上渲染某个组件。我将数据映射到并使用条件渲染来单独输出一个项目，但组件仍然在所有路径上呈现。

在下面的代码片段中，我（我认为我在做什么）映射我的数据，并说如果名称为shifts，则呈现特定组件，否则为null。该组件实际上是渲染，但它在此数据结构中的所有路由上呈现。单击shifts并单击其他路线时消失的原因是什么？任何帮助都会很棒。

＆＃13;

＆＃13;

import React from 'react';

import { schedulingData } from '../../../../data/data';
import ShiftsView from './ShiftsView';

class SchedulingChildItem extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.params.schedulingChild}</h2>
        {
          schedulingData.map((item, index) => {
            return (
              <div key={index}>
                {
                  item.get('categories').map((category) => {
                    return (
                      <div key={category.get('name')}>
                        {
                          category.get('subcategories').map((subcategory) => {
                            return (
                              <div key={subcategory.get('name')}>
                                {
                                  subcategory.get('name') === 'Shifts'
                                    ? <ShiftsView />
                                    : null
                                }
                              </div>
                            );
                          })
                        }
                      </div>
                    );
                  })
                }
              </div>
            );
          })
        }
      </div>
    )
  }
}

export default SchedulingChildItem;

＆＃13;

＆＃13;

＆＃13;

以下是数据：

＆＃13;

＆＃13;

export const schedulingData = Immutable.fromJS([
  {
    value: 'scheduling',
    title: 'Scheduling',
    route: '/scheduling',
    name: 'calendar',
    categories: [
      {
        id: 0,
        name: 'Your Schedule',
        subcategories: [
          {
            id: 0,
            name: 'Shifts',
            route: '/scheduling/shifts',
          },
          {
            id: 1,
            name: 'Make Requests',
            route: '/scheduling/makeRequests',
          },
        ],
      },
      {
        id: 1,
        name: 'Reports',
        subcategories: [
          {
            id: 2,
            name: 'Coming Soon!',
            route: '/scheduling/comingSoon',
          },
        ],
      },
      {
        id: 2,
        name: 'Manage',
        subcategories: [
          {
            id: 2,
            name: 'By Day',
            route: '/scheduling/byDay',
          },
          {
            id: 3,
            name: 'By Week',
            route: '/scheduling/byWeek',
          },
        ],
      },
    ],
  },
]);

＆＃13;

＆＃13;

＆＃13;

这是我的路线：

＆＃13;

＆＃13;

  <Router history={browserHistory}>
    <Route path="/" component={ShellNavigation} >
      <IndexRoute component={Dashboard} />
      <Route path="/scheduling">
        <Route path=":schedulingChild" component={SchedulingChildItem} />
      </Route>
    </Route>
  </Router>

＆＃13;

＆＃13;

＆＃13;

带链接的组件：

＆＃13;

＆＃13;

import React from 'react';
import { Link } from 'react-router';

import { schedulingData } from '../../../../data/data';

class Scheduling extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {
            schedulingData.map((item, index) => {
              return (
                <div key={index}>
                  {
                    item.get('categories').map((category, c) => {
                      return (
                        <div key={c}>
                          <div>{category.get('name')}</div>
                          {
                            category.get('subcategories').map((subcategory, sc) => {
                              return (
                                <div key={sc}>
                                  {
                                    <Link to={subcategory.get('route')}>{subcategory.get('name')}</Link>
                                  }
                                </div>
                              );
                            })
                          }
                        </div>
                      );
                    })
                  }
                </div>
              );
            })
          }
        </ul>
        {this.props.children}
      </div>
    );
  }
}

export default Scheduling;

＆＃13;

＆＃13;

＆＃13;