Question

我的路由器下面有一个简单的react应用程序

index.tsx

import { HashRouter } from 'react-router-dom';

render(
  <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <HashRouter>
          <AppContainer />
        </HashRouter>
      </PersistGate>
  </Provider>, document.getElementById('app') as HTMLElement);

我的AppContainer

 const mapStateToProps = (state, ownProps) => {
        console.log("The state is here and now ", state);
        return {
            account: state.account,
        }
    }
     const mapDispatchToProps = (dispatch: Dispatch<any>) => {
            return {
                getUsers: () => dispatch(actions.fetchUser()),
            }
        };

        export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps, mergeProps)(AppComponent));

和我的AppComponent渲染方法reyurns

   render() {
        return (
            <div className="main-app">    

                    <Route exact path='/' component={HomeContainer} />
                    <Route path="/login" component={LoginComponent} />
                    <Route path="/home" component={HomeContainer} />
                    <Route path="/about" component={AboutContainer} />

            </div>
        )
    }

我的应用运行良好，然后我们决定需要使用BrowserRouter代替。只需将index.tsx更改为

import { BrowserRouter as Router, HashRouter } from 'react-router-dom';

render(
  <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router>
          <AppContainer />
        </Router>
      </PersistGate>
  </Provider>, document.getElementById('app') as HTMLElement);

中断我的路由。现在无论如何它都停留在第一条路线上。我在所有地方都尝试了一切，有人建议将webpack中的publicPath从空更改为/。我什么也没做。请我缺少什么。我已经尽一切努力了。任何帮助将不胜感激。

从HashRouter更改为browserRouter后，React Router 4路由停止工作

0 个答案: