Ссылка на React-router меняет URL, но не перерисовывает

Я использую MobX для рендеринга некоторых заказов с помощью React и React-router. Когда я использую Link, URL-адрес изменяется, но представление не отображается. Когда я обновляю страницу, вид будет таким, каким он должен быть. Некоторое время я искал и нашел здесь, что обозреватель MobX блокирует повторную отрисовку, поскольку использует shouldComponentUpdate. Я попытался использовать метод определения местоположения, потому что этот параметр изменился и должен вызвать повторный рендеринг, но это, похоже, не помогает.

Я также пробовал использовать withRouter, но мне не удалось реализовать это в качестве декоратора.

Обновление
В этой ветке сказано что декораторы ломают response-router? Использование withRouter исправляет это для них, но все же я не знаю, как мне реализовать это в своем коде ...

index.js

ReactDOM.render((
  <Provider {...stores}>
    <BrowserRouter>
      <App location={location} />
    </BrowserRouter>
  </Provider>
),
  document.getElementById('root')
);

App.js

import React from 'react';
import {Switch, Route, withRouter} from 'react-router-dom';
import {Order} from './components';
import {AllOrders} from './containers';
import {inject, observer} from 'mobx-react';
import {isEmpty} from 'lodash';

const App = ({orders, location}) => {
  console.log(location);
  return(
    <Switch>
      {
        !isEmpty(orders) && <Route exact path="/orders" render={(props) => (<AllOrders {...props} orders={orders} />)} />
      }
      {
        !isEmpty(orders) && <Route path="/orders/:id" render={(props) => (<Order {...props} orders={orders} />)} />
      }
    </Switch>
  )
}

export default inject(
  ({orderStore}) => ({
    orders: orderStore.orders
  })
)(
  observer(App)
);

AllOrders.js

class AllOrders extends Component{

  render(){
    const {orders} = this.props;
    return(
      <div>
        {
          !isEmpty(orders) &&
          orders.map((props, key) => {
            return(
              <Link to={`/orders/${props.id}`} key={key}>{props.id}<br /></Link>
            )
          })
        }
      </div>
    )
  }
}

export default AllOrders;

reactjs react-router mobx mobx-react
person Kevin    schedule 17.08.2017    source источник
comment
Выполняется ли повторный рендеринг вашего приложения при изменении маршрута?   -  person GProst    schedule 18.08.2017
comment
Нет, журнал местоположения не запускается. Я также добавил компонент, содержащий ссылки.   -  person Kevin    schedule 18.08.2017

Ответы (1)


arrow_upward
4
arrow_downward

Внутри моего BrowserRouter я добавил компонентное приложение, вместо этого он должен был быть маршрутом, который передается компонентному приложению. Это заставило маршрутизацию снова работать. Решение меняло мой index.js на

ReactDOM.render((
  <Provider {...stores}>
    <BrowserRouter>
      <Route component={App} />
    </BrowserRouter>
  </Provider>
),
  document.getElementById('root')
);
person Kevin    schedule 18.08.2017