React-Router Link ändert die URL, aber rerender nicht

Question

Ich verwende MobX, um einige Aufträge mit React und React-Router zu rendern. Wenn ich Link verwende, ändert sich die URL, aber die Ansicht wird nicht gerendert. Wenn ich die Seite aktualisiere, ist die Ansicht so, wie sie sein sollte. Ich suchte nach einer Weile und fand here, dass MobX-Beobachter das Wiedererstellen blockiert, weil es shouldComponentUpdate verwendet. Ich habe versucht, die location-Methode zu verwenden, da sich diese Prop-Datei ändert und ein erneutes Rendering auslösen sollte, aber das scheint nicht zu helfen.

Ich habe auch versucht, mitRouter zu verwenden, aber ich habe es nicht geschafft, das als Dekorateur zu implementieren.

aktualisieren
In this thread wird gesagt, dass die Dekorateure reagieren-Router zu brechen? Mit withRouter fixiert es für sie, aber ich weiß noch immer nicht, wie ich das in meinen Code implementieren sollte ...

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

In meinem BrowserRouter habe ich die Komponente App hinzugefügt, stattdessen sollte es eine Route sein, an die die Komponente App übergeben wurde. Dies hat das Routing wieder funktioniert. Die Lösung wurde mein index.js zu

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