reactjs - React-router Link changes URL but doesn't rerender -
i'm using mobx render orders react , react-router. when i'm using link url changes, view doesn't rendered. when refresh page, view should be. searched while , found here mobx observer blocks rerendering because uses shouldcomponentupdate. tried using location method, because prop changes , should trigger re-render, doesn't seem help.
i tried use withrouter, didn't manage implement decorator.
update
in this thread it's said decorators breaking react-router? using withrouter fixes them, still not know how should implement code...
index.js
reactdom.render(( <provider {...stores}> <browserrouter> <app location={location} /> </browserrouter> </provider> ), document.getelementbyid('root') );
app.js
import react 'react'; import {switch, route, withrouter} 'react-router-dom'; import {order} './components'; import {allorders} './containers'; import {inject, observer} 'mobx-react'; import {isempty} '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;
inside browserrouter added component app, instead should've been route passed component app. made routing work again. solution changing index.js to
reactdom.render(( <provider {...stores}> <browserrouter> <route component={app} /> </browserrouter> </provider> ), document.getelementbyid('root') );
Comments
Post a Comment