Question

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

我也尝试使用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;

Answer 1

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

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

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

1 个答案: