React Router更改URL，但组件未呈现

Question

在过去的几周中，我一直在尝试学习React，并开始在一个展示艺术品的网站上工作。

我希望用户能够单击显示的图像之一，并希望向新组件加载有关作品的信息。

我在图库视图的下面实现，但是当我单击图像时，URL会更改，但是WorkPage组件永远不会加载。

任何人都可以发现我在做什么错吗？链接和图像是在renderItems()函数中生成的。

import React, { Component } from "react";
import Masonry from 'react-masonry-css';
import WorkPage from "./WorkPage"
import axios from "axios";
import { Link, Route, Switch, useRouteMatch, useParams } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";

class Works extends Component {
    constructor(props) {
        super(props);
        this.state = {
            viewPaintings: true,
            workList: []
        };

        axios
            .get("http://localhost:8000/api/works/")
            .then(res => this.setState({ workList: res.data }))
            .catch(err => console.log(err))
    };

    displayPaintings = status => {
        if (status) {
            return this.setState({ viewPaintings: true })
        }

        return this.setState({ viewPaintings: false })
    };

    renderTabList = () => {
        return (
            <div>
                <ul className="tab-list-buttons">
                    <li onClick={() => this.displayPaintings(true)}
                        className={this.state.viewPaintings ? "active" : "disabled"}
                        key="button1"
                    >
                        Paintings
                    </li>

                    <li onClick={() => this.displayPaintings(false)}
                        className={this.state.viewPaintings ? "disabled" : "active"}
                        key="button2"
                    >
                        Works on Paper
                    </li>
                </ul>
            </div>
        );
    };

    renderItems = () => {

        const { viewPaintings } = this.state;

        const newItems = viewPaintings 
                ? this.state.workList.filter(item => item.type === 1) 
                : this.state.workList.filter(item => item.type === 0);

        const breakpointColumnsObj = {
            default: 4,
            1100: 3,
            700: 2,
            500: 1
          };

        const items = newItems.map(item => (
            <div key = {item.slug}>
                <Link to={`${item.slug}`}>
                    <img src={item.image} alt={item.name} width="300"/>
                </Link>

                <Switch>
                    <Route path=":item.slug" component={WorkPage} />
                </Switch>
            </div>
        ));

        return (
            <Masonry
                breakpointCols={breakpointColumnsObj}
                className="my-masonry-grid"
                columnClassName="my-masonry-grid_column"
                >
                    {items}
            </Masonry>
        );
    }

    render() {
        return (
            <Router>
                <div>
                        { this.renderTabList() }
                        { this.renderItems() }
                </div>
            </Router>
        )
    };
}

export default Works;