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

Question

My app has a default route that loads the component HomePage on the localhost/ path in dev mode.

But when I refresh the app from any page, the home page is displayed instead, even though the URL in my browser displays localhost/any/other/path . If I then navigate manually through the app to the /any/other/path path, the browser's URL becomes localhost/any/other/path/any/other/path .

It's like the router always thinks the current path is / on refresh.

What could the issue be? I'm using React 16 and "react-router-dom": "5.1.2" .

My routes are laid out as follows:

<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>

And my Redux router reducer is as follows:

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

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

In the store the router reducer starts as follows, even when loading a URL:

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

Edit: Simplified my use case to be more straightforward, added more information

Answer 1

I am not 100% sure, but my hunch is that this behavior is more related to using Redux and ConnectedRouter than your routes, which look fine to me. 2 questions:

1. Are you using hot reloading?

2. If you take this same code and run it in a non-redux app with BrowserRouter, what happens?

Answer 2

When true, redirecting will push a new entry onto the history instead of replacing the current one.

Redirect push to="/somewhere/else" /

Are you using the Redirect push in your code?

Answer 3

Found the issue.

I had changed the default basename argument in my browserHistory's configuration, which did not work as I understood (I was trying to fix a lack of redirection issue on app launch).

Removing the basename: window.location.pathname line fixed my (self-inflicted) problem.

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>