React router Link не вызывает обновление компонента внутри вложенных маршрутов

Ответ 1

Не удалось дойти до конца, но я смог достичь своих целей с помощью ComponentWillRecieveProps:

componentWillReceiveProps(nextProps){
    if (nextProps.params.slug !== this.props.params.slug) {
        const {dispatch, params} = nextProps;
        PortfolioDetail.readyOnActions(dispatch, params, true);
    }
}

Другими словами, по какой-либо причине, когда я использую React Router Link для ссылки на страницу с SAME PARENT COMPONENT, она не запускает компонент componentWillUnMount/componentWillMount. Поэтому мне приходится вручную запускать мои действия. Он работает, как я ожидаю, всякий раз, когда я связываюсь с Маршрутами с другим родительским компонентом.

Возможно, это так же конструировано, но оно не кажется правильным и не интуитивным. Я заметил, что в Stackoverflow есть много похожих вопросов о том, что Link меняет URL-адрес, но не обновляет страницу, поэтому я не единственный. Если у кого-нибудь есть представление об этом, я все равно буду его слышать!

Ответ 2

Хорошо также разделить код компонентов. Тем не менее, я пытался воссоздать то же самое на местном уровне и отлично работает для меня. Ниже приведен пример кода,

import { Route, Link } from 'react-router';
import React from 'react';
import App from '../components/App';

const Home = ({ children }) => (
  <div>
    Hello There Team!!!
    {children}
  </div>
);

const PortfolioDetail = () => (
  <div>
    <Link to={'/portfolio/previous-item'}>
      <button className="button button-xs">Previous</button>
    </Link>
    <Link to={'/portfolio/next-item'}>
      <button className="button button-xs">Next</button>
    </Link>
  </div>
);

const PortfolioItemDetail = () => (
  <div>PortfolioItemDetail</div>
);

const NoMatch = () => (
  <div>404</div>
);

module.exports = (
  <Route path="/" component={Home}>
    <Route path='/' component={Home}>
        <Route path="/index:hashRoute" component={Home} />
    </Route>
    <Route path="/portfolio" component={PortfolioDetail} />
    <Route path="/portfolio/:slug" component={PortfolioItemDetail} />
    <Route path="*" component={NoMatch} />
  </Route>
);

Ответ 3

Я застрял на этом также в React 16.

Мое решение было следующим:

componentWillMount() {
    const { id } = this.props.match.params;
    this.props.fetchCategory(id); // Fetch data and set state
}

componentWillReceiveProps(nextProps) {
    const { id } = nextProps.match.params;
    const { category } = nextProps;

    if(!category) {
        this.props.fetchCategory(id); // Fetch data and set state
    }
}

Я использую redux для управления состоянием, но концепция такая же, как я думаю.

Задайте состояние в соответствии с нормальным значением в методе WillMount, и когда вызывается WillReceiveProps, вы можете проверить, было ли состояние обновлено, если у вас нет возможности вызвать метод, который устанавливает ваше состояние, это должно повторно отобразить ваш компонент.

Ответ 4

componentWillReceiveProps - это ответ на этот вопрос, но это немного раздражает. Я написал концепцию BaseController, которая устанавливает действие состояния при изменении маршрута EVEN, хотя компонент маршрута тот же. Итак, представьте, что ваши маршруты выглядят так:

<Route path="test" name="test" component={TestController} />
<Route path="test/edit(/:id)" name="test" component={TestController} />
<Route path="test/anything" name="test" component={TestController} />

Итак, BaseController проверит обновление маршрута:

import React from "react";

/**
 * conceptual experiment
 * to adapt a controller/action sort of approach
 */
export default class BaseController extends React.Component {


    /**
     * setState function as a call back to be set from
     * every inheriting instance
     *
     * @param setStateCallback
     */
    init(setStateCallback) {
        this.setStateCall = setStateCallback
        this.setStateCall({action: this.getActionFromPath(this.props.location.pathname)})
    }

    componentWillReceiveProps(nextProps) {

        if (nextProps.location.pathname != this.props.location.pathname) {
            this.setStateCall({action: this.getActionFromPath(nextProps.location.pathname)})
        }
    }

    getActionFromPath(path) {

        let split = path.split('/')
        if(split.length == 3 && split[2].length > 0) {
            return split[2]
        } else {
            return 'index'
        }

    }

    render() {
        return null
    }

}

Затем вы можете наследовать его:

import React from "реагировать";   импортировать BaseController из './BaseController'

export default class TestController extends BaseController {


    componentWillMount() {
        /**
         * convention is to call init to
         * pass the setState function
         */
        this.init(this.setState)
    }

    componentDidUpdate(){
        /**
         * state change due to route change
         */
        console.log(this.state)
    }


    getContent(){

        switch(this.state.action) {

            case 'index':
                return <span> Index action </span>
            case 'anything':
                return <span>Anything action route</span>
            case 'edit':
                return <span>Edit action route</span>
            default:
                return <span>404 I guess</span>

        }

    }

    render() {

        return (<div>
                    <h1>Test page</h1>
                    <p>
                        {this.getContent()}
                    </p>
            </div>)
        }

}

Ответ 5

Я не уверен, исправляет ли это исходную проблему, но у меня была похожая проблема, которая была решена путем передачи функции callback () => this.forceUpdate() вместо this.forceUpdate.

Поскольку никто больше не упоминает об этом, я вижу, что вы используете onClick={this.forceUpdate} и пытаетесь использовать onClick={() => this.forceUpdate()}.