为什么 mobx-react observer break react-router-dom navlink active class？

Question

使用 mobx-react 的 observer 时 在 react-router 的 [=18] 上应用 class =] 组件坏了。

产生问题的设置：

使用创建 React 应用程序

package.json

{
  "name": "routertest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "mobx": "^3.1.9",
    "mobx-react": "^4.1.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import Nav from './Nav';
import './App.css';

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)
const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
  </div>
)



class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Nav />
          <hr />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topics} />
        </div>
      </BrowserRouter >
    );
  }
}

export default App;

Nav.js

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { observer } from 'mobx-react';

const Nav = observer (class Nav extends Component {
    render() {
        return (
            <ul>
                <li><NavLink exact to="/" activeClassName="active">Home</NavLink></li>
                <li><NavLink to="/about" activeClassName="active">About</NavLink></li>
                <li><NavLink to="/topics" activeClassName="active">Topics</NavLink></li>
            </ul>
        );
    }
})

export default Nav;

这是问题的简化显示。我的用例涉及实际使用 mobx store 来创建 NavLink 以及使用装饰器。寻找 为什么 观察者包装器停止 react-router-dom 应用活动 class.

Answer 1

我只需要堆叠我的 class wrappers/decorators。这个例子使用的是基本的 createReactApp，所以没有装饰器，但我的实际用例是使用 createReactApp 的打字稿分支，并且支持装饰器。

我的问题是通过在 classes 上堆叠装饰器来解决的，这样来自 React router 和 mobx 的 context 就被传递了下来。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

示例：

@withRouter
@inject('store')
@observer
export class MyComponent extends React.Component{
...
}

为什么 mobx-react observer break react-router-dom navlink active class？

Why does mobx-react observer break react-router-dom navlink active class?

reactjs

react-router

mobx

mobx-react

react-router-dom