Question

我需要使用ReactRouter 1.1和History.js加载左侧导航这是我的路线列表：

<Router history={history}>
    <Route path="/" component={App}>
      <IndexRedirect to="/stories" />
      <Route path="/stories" component={StoriesContainer} />
      <Route path="/stories/new" component={NewStory} />
      <Route path="/stories/:storyId" component={StoryContainer}>
        <Route path="overview" component={XStoryOverviewContainer} />
        <Route path="messages" component={XMessageListContainer} />
        <Route path="settings" component={XStorySettingsContainer} />
      </Route>
    </Route>
  </Router>

然后我有了StoryContainer，其中包含一个左侧导航栏和一个嵌套在routes文件中的子列表（请注意左侧导航栏不适用于整个应用程序，仅适用于StoryContainer和子组件）。 StoryContainer按如下方式加载左侧导航：

<div>
  <StoryNavigationCard
    items={navigation}
    selectedItemKey={this.state.navigationKey}
    onOptionSelected={path => this._navigationKeyChanged(path)}>
    </StoryNavigationCard>
     {
      this.props.children
    }
</div>

  _navigationKeyChanged(path: string) {
    this.history.pushState(null, path);
  }

注意我设置新路径的方式（使用历史记录）。现在这是我的导航卡。

 const React = require('React');

type Props = {
  items: Array<Object>,
  selectedItemKey: string,
  onOptionSelected: () => void,
};

type State = {
  selectedItemKey: string,
};

class StoryNavigationCard extends React.Component<void, Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {selectedItemKey: props.selectedItemKey};
  }

  PropTypes: Props;

  render(): ReactElement {

    const navigationItems = this.props.items.map((item, index) => (
      <CardSection
        onClick={() => {
          this.props.onOptionSelected(item.path);
          this.setState({selectedItemKey: item.key});
        }}
        key={item.key}>
        {item.label}
      </CardSection>
    ));

    return (
      <Card>
        {navigationItems}
      </Card>
    );
  }
}

注意onClick按钮。我正在设定给定孩子状态的父母的状态。这不是反应的方式和它应该如何完成，但我找不到另一种更新项目状态的方法。简而言之，我面临的问题如下：文件路由有一个组件X，其中包含嵌套的组件A，B和C. 组件X具有左导航，其具有选项列表“a”，“b”和“c”。如果用户单击其中一个选项，或者转到URL“x / a”，“x / b”或“x / c”，我希望能够正确加载组件（设置正确的值）所选选项左侧导航，在视图中加载右侧组件。

我希望这个问题可以帮助那些也在网上提出同样问题的人，我找不到适合的解决方案。

如何使用反应路由器和历史记录构建左导航？

0 个答案: