Estoy usando react y rails 6 para crear una aplicación de demostración. En application.html.erb agregué <%= javascript_pack_tag 'root' %> para que empaque mi root.jsx.

En routes.rb tengo:

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

Y en root.jsx tengo:

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"))
  );
})

Y en app.jsx:

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

Con HashRouter todo funciona bien. Pero con BrowserRouter, visito la página de inicio (UsersContainer), se renderiza bien; Enlace al UserContainer, funciona bien; pero si hago clic en "volver" en el navegador, veo una página en blanco.

Tengo un depurador para la representación de mi página de inicio, la solicitud AJAX se activó y mi tienda redux funciona bien, mi UsersContainer activó render (), pero se muestra en blanco.

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);
0
James Yu 13 jul. 2020 a las 20:29

1 respuesta

La mejor respuesta

Parece que esto tiene algo que ver con el paquete redux-rails que estaba usando. usé vainilla redux e implementé reductor, acciones, etc. y ahora todo funciona bien

0
James Yu 15 jul. 2020 a las 05:30