无法让 React Router 的 4 Link 工作

Question

出现问题的组件代码如下：

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { Redirect, Link, withRouter } from 'react-router-dom'
    import * as actions from 'actions';

    class DashBoard extends Component {
        constructor(props) {
            super(props);
        }
        componentDidMount() {
            this.props.dispatch(actions.deleteItems());
            this.props.dispatch(actions.fetchItems());
        }
        render() {
            let { items } = this.props;
            let key = 0;
            let renderItems = () => {
                if (!items) {
                    return
                }
                return items.map((item) => {
                    let { action, author } = item.logs[item.logs.length - 1];
                    return (
                        <div className="dashboard-item">
                            <h3>{item.name}</h3>
                            <div className="info-container">
                                <span>Amount: {item.number}</span>
                                <span>{item.state}</span>
                            </div>
                            <span className="created">{`${action} by ${author}`}</span>
                            <span className="last-log">{`Last log: ${item.logs[0].action} by ${item.logs[0].author}`}</span>
                            <div className="buttons">
                                <Link to='/'>Edit</Link>
                                <Link to={`/items/${item.id}/edit`}>Delete</Link>
                            </div>
                        </div>
                    );
                })
            }

            if (this.props.auth.token) {
                return (
                    <div className="dashboard-container">
                        {renderItems()}
                    </div>
                );
            } else {
                this.props.dispatch(actions.setError('You must log in.'))
                return <Redirect to='/' />
            }
        }
    }

    export default withRouter(connect(
        (state) => {
            return state;
        }

)(DashBoard));

我的重定向工作正常，但单击链接只会更改浏览器中的 url，实际上我仍然可以看到我的仪表板组件。如果我输入 localhost:3000/items/random id/edit 我得到正确的结果。创建和单击链接什么都不做。除了 url 栏，视觉上没有任何变化。 withRouter hack 似乎对我不起作用。但是直接输入 url 就可以了。我该如何解决这个问题？

编辑：路线定义

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Home from 'Home';
import Dashboard from 'Dashboard';
import EditItemForm from 'EditItemForm';
import NewItemForm from 'NewItemForm';

export class Main extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let { auth, error } = this.props;
        let renderError = () => {
            if (error) {
                return (
                    <div className="error">
                        <p>{error}</p>
                    </div>
                )
            } else {
                return (<div></div>)
            }
        }
        return (
            <div>
                {renderError()}
                <Route exact={true} path="/" component={Home} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/items/:id/edit" component={EditItemForm} />
                <Route path="/items/new" component={NewItemForm}/>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return state;
    }
)(Main);

编辑#2：如果查看 React DevTools，发现单击链接甚至不会更改路径 > 位置 > 路径名中的路径名

Answer 1

在我看来，相对于您在此处显示的 React Router 的使用而言，您的代码没有任何问题。

我建议您简化应用程序并发布主路由器组件，这应该没问题，因为您可以看到仪表板，但它会有所帮助。

尝试做一个假的 hello word 路由并从你的仪表板过渡到那里..

通常最有可能的情况是嵌套组件阻止了路由的更新。通常将 withRouter 放在每个连接的组件中应该可以工作。或者，您可以尝试在与路由嵌套的每个组件中添加 withRouter。

我认为应该有一个优雅的原因来解决这个问题，但也许这可以帮助您了解这个问题的根源。

然后尝试检查您的第三方库是否支持 RR4。 祝你好运！

Answer 2

我认为您可能需要在组件中的所有路由之上使用开关，因为即使我之前也遇到过类似的问题。但是，这适用于反应路由器 v3。希望这对你有帮助:) 干杯

React Router 4

React Router v4 Unofficial Migration Guide

Answer 3

所以我刚刚回滚到 v3。谢谢大家帮忙！