React-router Link 更改 URL 但不重新渲染

Question

我正在使用 MobX 通过 React 和 React-router 呈现一些订单。当我使用 Link 时，URL 会发生变化，但视图不会被渲染。当我刷新页面时，视图是应该的。我搜索了一段时间，发现 here MobX observer 阻止重新渲染，因为它使用了 shouldComponentUpdate。我尝试使用 location 方法，因为该道具发生变化并且应该触发重新渲染，但这似乎没有帮助。

我也尝试过使用 withRouter，但我没能把它作为装饰器来实现。

更新
在 this thread 中据说装饰器正在破坏 react-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;

Answer 1

在我的 BrowserRouter 中，我添加了组件应用程序，而不是它应该是一个传递给组件应用程序的路由。这使路由再次工作。解决方案是将我的 index.js 更改为

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

React-router Link 更改 URL 但不重新渲染

React-router Link changes URL but doesn't rerender

reactjs

react-router

mobx

mobx-react