BrowserRouter показывает пустую страницу, когда в истории "go назад"

Question

Я использую react и rails 6 для создания демонстрационного приложения. В application.html.erb я добавил <%= javascript_pack_tag 'root' %>, поэтому он упаковывает мои root.jsx.

в routes.rb У меня есть:

Rails.application.routes.draw do
  root "static_pages#root" # this points to root.html.erb which is empty

  namespace :api, defaults: { format: :json } do
    resources :users
  end
end

И в root.jsx у меня:

const Root = ({ store }) => (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

window.store = store;

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Root store={store}/>,
    document.body.appendChild(document.createElement("div"))
  );
})

А в app.jsx:

const App = () => (
  <div>
    <Switch>
      <Route path="/users/:id" component={UserContainer} />
      <Route exact path="/" component={UsersContainer} />
    </Switch>
  </div>
);

С HashRouter все нормально работает. Но с BrowserRouter я захожу на домашнюю страницу (UsersContainer), отображается нормально; Ссылка на UserContainer, работает нормально; но если я нажму «go назад» в браузере, я вижу пустую страницу.

У меня есть отладчик для рендеринга моей домашней страницы, запрос AJAX сработал, и мое хранилище redux работает нормально, мой UsersContainer сработал render (), но отображается пустой.

UsersContainer "

import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import React from "react"
import { connect } from "react-redux"
import { railsActions } from "redux-rails";

class Users extends React.Component {
  static propTypes = {
    fetchUsers: PropTypes.func,
    createUser: PropTypes.func,
    loading: PropTypes.bool,
    users: PropTypes.array,
  };

  componentDidMount() {
    // GET request to /users
    // Stores the result in redux and updates this component's models
    debugger;
    this.props.fetchUsers();
  }

  handleCreate = (userParams) => {
    // POST request to /users
    // The body of the post request will be JSON string of commentAttributes
    this.props.createUser(userParams);
  };

  render() {
    debugger;
    if (!this.props || this.props.loading) {
      return <p>Loading...</p>;
    }

    return (
      <React.Fragment>
        <h1>All Users</h1>
        <ul>
          {this.props.users.map((user) => (
            <li key={user.id}>
              <Link to={`/users/${user.id}`}>{`${user.fname} ${user.lname}`}</Link>
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  users: state.resources.Users.models
    .map(user => user.attributes),
  loading: state.resources.Users.loading,
});

const mapDispatchToProps = {
  fetchUsers: () => railsActions.index({ resource: "Users" }),
  createUser: () => railsActions.create({resource: "Users" })
};

export default connect(mapStateToProps, mapDispatchToProps)(Users);

Answer 1

похоже, это как-то связано с пакетом redux-rails, который я использовал. использовал vanilla redux и реализовал reducer, actions и т.д. c, и теперь все работает нормально