React Router меняет URL, но компонент не рендерит - PullRequest
Новая
       19

React Router меняет URL, но компонент не рендерит

0 голосов
/ 14 апреля 2020

Я пытался изучить 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;
...