我'm using MobX to render some orders with React and React-router. When I' m使用链接URL更改，但视图未呈现 . 当我刷新页面时，视图应该是它应该的 . 我搜索了一会儿，发现了MobX观察者阻止重新渲染的here因为它使用了shouldComponentUpdate . 我尝试使用location方法，因为prop更改并应该触发重新渲染，但这似乎没有帮助 .
我也尝试使用withRouter，但我没有设法将其作为装饰器来实现 .
Update
在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}
</Link>
)
})
}
</div>
)
}
}
export default AllOrders;
1 回答
在我的BrowserRouter中，我添加了组件App，而不是它应该是一个传递组件App的Route . 这使得路由再次工作 . 解决方案是将我的index.js更改为