常见问题解决方案：mobx-react-router

常见问题解决方案：mobx-react-router

项目基础介绍

mobx-react-router 是一个开源项目，旨在帮助开发者在使用 MobX 和 React Router 时，能够保持 MobX 状态与 React Router 的路由状态同步。该项目通过提供一个 RouterStore 和相应的同步方法，使得当路由发生变化时，引用到路由状态的 MobX 组件能够自动更新。项目的主要编程语言为 JavaScript。

新手常见问题及解决步骤

问题一：如何正确安装mobx-react-router

问题描述： 新手在使用mobx-react-router时可能会遇到不知道如何正确安装的问题。

解决步骤：

1. 打开命令行工具。
2. 切换到项目目录。
3. 输入以下命令安装mobx-react-router：

   npm install --save @ibm/mobx-react-router
   

4. 如果项目中还未安装 MobX 和 React Router，需要同时安装它们：

   npm install --save mobx mobx-react react-router
   

问题二：如何在项目中配置mobx-react-router

问题描述： 初学者可能不清楚如何在项目中配置mobx-react-router以使其正常工作。

解决步骤：

1. 在项目中创建一个新的 MobX store，通常命名为 RouterStore。
2. 导入 createBrowserHistory 从 'history'，Provider 从 'mobx-react'，以及 RouterStore 和 syncHistoryWithStore 从 @ibm/mobx-react-router。
3. 创建一个 BrowserHistory 实例，并将其与 RouterStore 同步：

   const browserHistory = createBrowserHistory();
   const routingStore = new RouterStore();
   const history = syncHistoryWithStore(browserHistory, routingStore);
   

4. 在 React 组件中，使用 Provider 包裹应用的根组件，并传入 stores 对象：

   ReactDOM.render(
     <Provider stores={{ routing: routingStore /*, ...其他stores */ }}>
       <Router location={routingStore.location} navigator={history}>
         <App />
       </Router>
     </Provider>,
     document.getElementById('root')
   );
   

问题三：如何在组件中使用mobx-react-router的路由状态

问题描述： 开发者可能不知道如何在组件中使用mobx-react-router的路由状态。

解决步骤：

1. 在组件中注入 routing store。
2. 使用 @inject 和 @observer 装饰器装饰组件。
3. 在组件中访问 location、push 和 back 方法，如下所示：

   @inject('routing') @observer
   export default class App extends Component {
     render() {
       const { location, push, back } = this.props.routing;
       return (
         <div>
           <span>当前路径：{location.pathname}</span>
           <button onClick={() => push('/test')}>更改 URL</button>
           <button onClick={() => back()}>返回</button>
         </div>
       );
     }
   }