Question

我有一个带有三个链接的NavBar。如果我点击链接，则网址会更新，然后我会导航到/categories/categoryID。我第一次点击链接一切正常。但它只能工作一次。如果我点击其他类别（导航栏中的链接更改类别），内容将不会更改。但是，当我刷新浏览器时，它会改变。

我点击NavBar中的链接
网址正确更改
组件不会重新渲染
如果我刷新浏览器，则会加载正确的内容

URL与重新呈现组件之间似乎存在脱节。

问题：断开连接的原因是什么？

我怀疑这种行为的原因是我的反应路由器（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）

，也可以在您的传奇中执行此操作

Answer 2

您是否尝试使用来自react-router-dom的withRouter包装导出？ Redux有时会在与React Router结合使用时劫持生命周期方法。我的网址更新时遇到了类似的问题，但显示的空白页面显示并成功完成了以下内容：

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

浏览器URL更新但组件不会更新

2 个答案: