reactjs - 浏览器 URL 更新，但组件不随之更新

Question

我有一个带有三个链接的导航栏。如果我点击链接，URL 就会更新，并且我会导航到 /categories/categoryID。我第一次点击链接时一切正常。但它只能工作一次。如果我单击另一个类别(导航栏中的链接更改类别)，内容将不会更改。但是，当我刷新浏览器时，它会发生变化。

1. 我点击导航栏中的链接
2. 网址更改正确
3. 组件不会重新渲染
4. 如果我刷新浏览器，则会加载正确的内容

URL 和组件的重新渲染之间似乎存在脱节。

问题:导致断开连接的原因是什么？

我怀疑这种行为的原因是我的React Router(v4)的实现。

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route path="/categories/index/:uuid/" component={CategoryIndex} />
                <Route path="/user/signup" component={SignUpForm} />
                <Route path="/user/login" component={LoginForm} />
                <Route path="/home/" component={IndexPage} />
            <Route/> 
            </Switch>
        </div>
    </BrowserRouter>
    </Provider>
    , document.getElementById('root'));
registerServiceWorker();

不重新渲染的组件如下所示:

class PostList extends Component {

    componentDidMount() {
        const { uuid } = this.props.match.params;
        this.props.fetchCategoriePosts(uuid);

    }

    renderPostList() {
        const { category } = this.props;
        if (category) {
            return (
                _.map(category, post => {
                    return(
                        <li className="list-group-item" key={post.uuid}>
                        <div>Hallo</div>
                        <Link to="/">{post.title}</Link>
                        </li>
                    )
            }));
        }
    }

    render() {
        return (
            <div className="container">
                <ul className="list-goup">
                    {this.renderPostList()}
                </ul>
            </div>
        );
    }
}

function mapStateToProps({ category }) {
    return {category}
}

export default connect(mapStateToProps, {fetchCategoriePosts}) (PostList);

有人可以帮忙吗？

Answer 1

这似乎是 React 生命周期问题。我假设您希望组件更新而不是在 URL 更改时重新呈现。

componentWillUpdate(nextProps) {
  const { uuid } = nextProps.match.params;
  if (uuid !== this.props.params.match.uuid) {
    this.props.fetchCategoriePosts(uuid);
 }
}

(如果您监听事件LOCATION_CHANGE，您也可以在您的传奇中执行此操作)