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));

我让Redirect工作，但点击链接只是在浏览器中更改网址，实际上我仍然会看到我的信息中心组件。如果我输入localhost：3000 / items / random id / edit我得到正确的结果。创建并单击链接不会执行任何操作。除了网址栏外，其他任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：弄清楚点击链接甚至不会改变路线中的路径名＆gt;位置＆gt;路径名，如果查看React DevTools

Answer 1

我认为您可能需要在组件中的所有路径之上使用开关，因为即使我之前遇到过类似的问题。然而，这在反应路由器v3中有效。希望这有助于你:)欢呼

React Router 4

React Router v4 Unofficial Migration Guide

Answer 2

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

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

尝试做一个假的hello word route并从你的仪表板转换到那里..

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

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

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

Answer 3

所以我刚刚回到v3。谢谢各位帮忙！

无法让React Router的4 Link工作

3 个答案: