React-router URLはURLを変更しますが再レンダリングしません

Question

私はMobXを使用してReactとReact-routerでいくつかの注文を表示しています。リンクを使用しているとき、URLは変更されますが、ビューはレンダリングされません。ページをリフレッシュすると、そのように表示されます。しばらく検索したところ、shouldComponentUpdateが使用されているため、MobXオブザーバが再レンダリングをブロックすることがわかったhereが見つかりました。その小道具が変更され、再レンダリングを引き起こすはずだから、ロケーションメソッドを使ってみましたが、それは役に立たないようです。

また、withRouterを使用しようとしましたが、デコレータとして実装することはできませんでした。

更新this threadで
デコレータが反応し、ルータを壊していると言ったのですか？

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) 
); 

... withRouterが彼らのためにそれを修正使用して、それでも私は自分のコードの中にこれを実装する方法を知りません

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内でコンポーネントAppを追加しました。代わりに、コンポーネントAppに渡されたRouteであったはずです。これによりルーティングが再び行われました。解決策は私のindex.jsを