1

Дело обстоит так, что при нажатии на ссылку url в браузере меняется, но по сути в контексте router в React Dev Tools ничего не меняется. То есть при нажатии на ссылку просто ничего не происходит кроме смены адреса. Страница визуально никак не меняется, то есть состояние приложение неизменно. Отображается компонент, в котором эта ссылка и лежит. Была похожая проблема с редиректом после логина, решилась каким-то странным образом, я просто продолжал работать дальше. Был бы рад если бы кто-то сказал мне что изменилось https://github.com/RomanSarder/knex-api-front-end/commit/a2b7f120abbaf109dc397e20092957a59b4b8445.

Но собственно вопрос вот в чем: Почему не работает ссылка?

Вот сам компонент с ссылкой:

   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" key={key++}>
                        <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={`/items/${item.id}/edit`}>Edit</Link>
                            <Link to='/'>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));

Вот определение роутов:

import React, { Component } from 'react';
import { Route, Switch } 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()}
                <Switch>
                    <Route exact={true} path="/" component={Home} />
                    <Route exact={true} path="/dashboard" component={Dashboard} />
                    <Route exact={true} path="/items/:id/edit" component={EditItemForm} />
                    <Route exact={true} path="/items/new" component={NewItemForm} />
                </Switch>
            </div>
        );
    }
}

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

1 ответ 1

0

Временно работающий рецепт - использовать вместо "Link to" "a href". Столкнулся сам с этой проблемой, ясно,что суть в неправильной реализации Link,которая после изменения URL не передаёт событие для обработки в rout, но починить это смогут только авторы реакта, а при использовании последней версии работает только вариант с и перезагрузкой страницы.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.