Question

我想知道是否可以结合使用BrowserHistory和MemoryHistory来实现以下目标：

页面A（/ pageA应该接受此url）=>，从这里开始使用memoryHistory基本上不操纵URL

页面B（/ pageB应该接受此url）=>，从此开始使用memoryHistory基本上不操纵URL

我的代码：

const history = createMemoryHistory({
  initialEntries: ['/PageA', '/PageB', '/PageBResult', '/PageAResult'],
  initialIndex: 1
});

const store = configureStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history} >
      <App />

    </ConnectedRouter>
  </Provider>,
  document.getElementById('root') as HTMLElement
);

答案最后我自己弄清楚了对于那些想知道如何实现这一目标的人，请执行以下操作

在您的webpack.config中

 devServer: {
     historyApiFallback: true //add this line
    }

在您的index.html

中

const resolveInitialIndex = () =>{
   if(window.location.pathname.indexOf('PageB') > - 1)
     return 1;

    return 0;

}
const history = createMemoryHistory({
      initialEntries: ['/PageA', '/PageB', '/PageBResult', '/PageAResult'],
      initialIndex: resolveInitialIndex()
    });

    const store = configureStore(history);

    ReactDOM.render(
      <Provider store={store}>
        <ConnectedRouter history={history} >
          <App />

        </ConnectedRouter>
      </Provider>,
      document.getElementById('root') as HTMLElement
    );

REACT-BrowserHistory和MemoryHistory的组合

0 个答案: