Question

我最近重新配置了我的React应用程序，似乎我已经破坏了参数化路由的功能。我不会过分深入了解它曾经如何运作，而是描述我目前所处的困境以及我的目标......

在我页面侧面的导航面板中，用户可以查看资源链接列表 - 这些链接的网址如下：

user/123
user/456
user/789
group/123
group/456
group/789

点击第一个链接现在将在我的页面上的主User中呈现div组件（在{this.props.children}中呈现 - 请参阅下面的App.jsx），并呼叫componentDidMount()为标识为123的用户提取数据并填充该组件。好的，到目前为止，非常好。

但是，如果用户现在点击user/456的链接，则不会发生任何事情。导航栏中的网址会更改，但User组件不会重新呈现，但点击group的链接会正确清除User组件并呈现Group组件代替......然后，当然，我对组等有同样的问题......

当路径名保持不变但参数已更改时，如何强制重新呈现组件？如果我点击user/123的链接，然后点击user/456的链接，我希望User组件重新呈现并提取新数据。

其他相关代码......

index.js

import { Router, Route, browserHistory } from 'react-router';

<Router history={browserHistory}>
    <Route path="/" component={App}>
        <Route path="/user/:id" component={User} />
        <Route path="/group/:id" component={Group} />
    </Route>
</Router>

App.jsx

<div className="App">
    <div className="body_section_container">
        <div className="body_section main">
            <Nav />
            {this.props.children}
        </div>
        <div className="body_section sidebar">
        <Search searchModel={this.searchAll} user_list={this.state.user_list} group_list={this.state.group_list} organizations_list={this.state.organizations_list} />
        </div>
    </div>
</div>

Answer 1

尝试插入componentWillReceiveProps，当路线参数更改时应该触发。然后，您可以接收新路线参数，提交新查询并更新状态。

Answer 2

在“路线”组件中，指定一个键。

BRANCH_NAME

当反应看到另一个键时，它将触发重新渲染。

React - 在参数化路径之间链接时重新渲染组件

2 个答案: