React-router 链接更改 URL 但不重新呈现答案

【问题标题】：React-router Link changes URL but doesn't rerenderReact-router 链接更改 URL 但不重新呈现
【发布时间】：2017-08-17 23:57:19
【问题描述】：

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

我也尝试使用 withRouter，但我没有设法将其作为装饰器实现。

更新
在this thread 中，据说装饰器正在破坏反应路由器？使用 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

【解决方案1】：

在我的 BrowserRouter 中，我添加了组件 App，而不是它应该是通过组件 App 传递的路由。这使得路由再次工作。解决方案是将我的 index.js 更改为

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

【讨论】：