Question

我有一个容器组件，其中包含一个基于状态属性打开和关闭的模态。

我想通过网址来控制，即我想拥有

/projects - the modal is NOT open
/projects/add - the modal IS open

除了能够直接链接到它之外，我希望在点击主容器中的链接以打开模式时更改URL。

有人可以解释我是如何做到这一点的，或者指出我正确指导的方向？

Answer 1

要以编程方式评估新网址，请传递router to your component并使用push。例如，push将通过用户操作在回调触发器中调用。

设置路由器时设置到/projects/:status的路由。然后，在组件路径中，您可以使用status读取this.props.param.status的值。阅读＆＃34; whats-it-look-lik＆＃34;以react-router为例。

Answer 2

注意：这种方式并不完美。它更像是反模式而不是模式。我在这里发布它的原因是它对我来说很好，我喜欢我可以添加模态的方式（我可以将模态添加到任何页面，一般来说它们的组件不会以任何方式依赖于其他应用程序。而且我保持好的网址而不是丑陋的?modal=login-form）。但在你发现一切正常之前，请准备好解决问题。三思而后行！

让我们考虑您想要关注网址：

/users显示<Users />组件
/users/login显示<Users />组件和<Login />模式

您希望Login不依赖于Users，比如将登录模式添加到其他页面而不会感到痛苦。

让我们考虑你有一个基于其他组件的根组件。例如，Users render可能如下所示：

render() {
  return (
    <Layout>
      <UsersList />
    </Layout>
  );
}

Layout＆＃39; render可能看起来像这样：

render() {
  return (
    <div className="page-wrapper">
      <Header />
      <Content>
        {this.props.children}
      </Content>
      <Footer />
    </div>
  );
}

诀窍是每次我们需要时强制模态注入<Layout />。

最简单的方法是使用助焊剂。我使用redux并为此类页面元信息设置了ui reducer，如果使用其他flux实现，则可以创建ui存储。无论如何，最终目标是渲染模态，如果<Layout />的状态（或更好的道具）包含modal等于表示模态名称的某个字符串。类似的东西：

render() {
  return (
    <div className="page-wrapper">
      <Header />
      <Content>
        {this.props.children}
      </Content>
      {this.props.modal ?
        <Modal key={this.props.modal} /> :
        null
      }
      <Footer />
    </div>
  );
}

<Modal />返回模态组件取决于给定的键（如果我们的login-form键我们想要接收<Login />组件）。

好的，让我们去路由器。请考虑以下代码段。

const modal = (key) => {
  return class extends React.Component {

    static displayName = "ModalWrapper";

    componentWillMount() {
      // this is redux code that adds modal to ui store. Replace it with your's flux
      store.dispatch(uiActions.setModal(key));
    }

    componentWillUnmount() {
      store.dispatch(uiActions.unsetModal());
    }

    render() {
      return (
        <div className="Next">{this.props.children}</div>
      );
    }

  }
};

...
<Route path="users" component={Next}>
  <IndexRoute component={Users}>
  <Route path="login" component={modal('login-form')}>
    <IndexRoute component={Users} />
  </Route>
</Route>

（不要关心Next - 为了简单起见，我在这里添加它。想象一下，它只是渲染this.props.children）

modal()函数返回触发ui商店中的更改的反应组件。因此，只要路由器获得/users/login，它就会login-form添加到ui商店，<Layout />将其作为道具（或状态）并呈现<Modal />，这会呈现相应的给出关键模态。

使用react-router从URL设置state属性

2 个答案: