Question

问题不是通过location.state传递组件道具/状态的反模式吗？你能建议一个更好的方法吗？

我有一些社交网站，每个用户都可以创建自己的个人资料。每个配置文件都是UserProfile组件，其路由如下：

ReactDOM.render((
    <Router history={History}>
        <Route path="/" component={App}>
            <IndexRoute component={Welcome} />
            <Route path="profile" component={UserProfile} />
        </Route>
    </Router>
), document.getElementById('app'));

我需要将用户点击重定向到我网站多个地方的特定用户个人资料。我这样做：

// Where server response contains username, surname, some counters etc.
Service.getUserSummary(userId).then(response => {
  History.pushState(reponse, '/profile');
});

并在response检索UserProfile：

module.exports = React.createClass({

  render() {
    // QUESTION: isn't it an anti-pattern? Is there any better way?
    const state = this.props.location.state,
          username = state.username,
          ............
  }
})

Answer 1

如果处理按ID区分的配置文件，最好的方法是在URL中包含ID：

save

此ReactDOM.render(( <Router history={History}> <Route path="/" component={App}> <IndexRoute component={Welcome} /> <Route path="profile/:userId" component={UserProfile} /> </Route> </Router> ), document.getElementById('app'));将在id UserProfile内显示。{/ 1}。

更好的做法是在重定向后从服务器加载数据，而不是之前的或期间的。因此，您有三个阶段显示个人资料页面：

在用户点击链接之前;

用户点击了该链接，路由器已重定向到“用户个人资料”页面，但它仍为空（“正在加载...”）;

数据已从服务器到达，this.props.params.userId组件的状态已更新，并使用新数据重新呈现。

以最简单的方式，可以在UserProfile方法中检索数据并将其设置为状态（请参阅https://facebook.github.io/react/tips/initial-ajax.html）：

componentDidMount()

React-router：传播路由组件props / state的真正方式

1 个答案: