ReactJS/Redux - 根组件页面在任何页面刷新时呈现

Question

我的应用程序有一个默认路由，它在开发模式下在localhost/路径上加载组件HomePage 。

但是，当我从任何页面刷新应用程序时，主页会改为显示，即使浏览器中的 URL 显示localhost/any/other/path 。 如果我随后通过应用程序手动导航到/any/other/path路径，则浏览器的 URL 将变为localhost/any/other/path/any/other/path 。

这就像路由器总是认为当前路径是/刷新。

可能是什么问题？ 我正在使用 React 16 和"react-router-dom": "5.1.2" 。

我的路线安排如下：

<Provider store={store}>
  <ConnectedRouter>
    <div>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/proxy" component={ProxyPage} />
        ...
      </Switch>
    </div>
  </ConnectedRouter>
</Provider>

我的 Redux router减速器如下：

import { createBrowserHistory } from 'history'
const history = createBrowserHistory({
  basename: window.location.pathname
})

// Reducers
combineReducers({
  ...
  router: connectRouter(history),
  ...
})

在商店中， router减速器启动如下，即使在加载 URL 时也是如此：

router: {
  action: "POP",
  location: {
    hash: "",
    pathname: "/",
    query: { },
    search: "",
    state: undefined
  }
}

编辑：将我的用例简化为更直接，添加了更多信息

Answer 1

我不是 100% 肯定，但我的预感是这种行为与使用 Redux 和 ConnectedRouter 的关系比你的路由更相关，这对我来说看起来不错。 2个问题：

1. 你在使用热重载吗？

2. 如果您使用相同的代码并在带有 BrowserRouter 的非 redux 应用程序中运行它，会发生什么？

Answer 2

当为 true 时，重定向会将新条目推送到历史记录中，而不是替换当前条目。

重定向推送到="/somewhere/else" /

您是否在代码中使用重定向推送？

Answer 3

发现问题。

我在我的 browserHistory 的配置中更改了默认的basename参数，这在我的理解中不起作用（我试图解决应用程序启动时缺少重定向的问题）。

删除basename: window.location.pathname行修复了我的（自己造成的）问题。

Answer 4

<Provider store={store}>
  <ConnectedRouter>
    <div>
      <Switch>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/proxy" component={ProxyPage} />
        ...
      </Switch>
    </div>
  </ConnectedRouter>
</Provider>