Question

我有一个类似于以下的react-redux原型

    html
   <body>
      <div id="app1"></div>
      <div id="app2"></div>
    </body>

有2个活着的应用程序共享同一个商店，但在不同的div中呈现。 React代码执行类似这样的操作

    Js
        ReactDOM.render(
        <Provider store={ store }>
          <Component1 />
        </Provider>,
          document.getElementById('app1')
        );

        ReactDOM.render(
        <Provider store={ store }>
          <Component2 />
        </Provider>,
          document.getElementById('app2')
        );

如果我需要实现一个共享的react-routing系统，当app1发生更改并修改URL时，它会被传递给app2并相应地更新它......这样的事情

Js
        ReactDOM.render(
        <Provider store={ store }>
           <Router history={ browserHistory }>
            <Route path="/(:param)" component={ Component1 } />
           </Router>
        </Provider>,
          document.getElementById('app1')
        );

        ReactDOM.render(
        <Provider store={ store }>
          <Route path="/" component={ App2 }>
           <Route path="/otherRoute(/:otherParam)" component={ Component2 } />
          </Route>          
        </Provider>,
          document.getElementById('app2')
        );

因此，Component1中的操作会调用Route / otherRoute（/：otherParam）对component2有效并在Component2中触发渲染

甚至可以使用React / Redux做一些可行的事情吗？

Answer 1

看起来这个不寻常的问题的最佳方法是不使用react-router并使用库历史记录（反应路由器所基于的）直接实现自定义路由器。更多资源

Simple Routing with Redux and React

You might not need React Router

共享不同React应用程序之间的路由

1 个答案: