ไม่สามารถใช้งาน 4 Link ของ React Router ได้

นี่คือรหัสของส่วนประกอบที่เกิดปัญหา:

    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 จะไม่ทำงานสำหรับฉัน อย่างไรก็ตามการป้อน 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