web-dev-qa-db-fra.com

ReactJS Comment passez-vous d'une page à l'autre dans React?

Donc, venant d'un fond Angular/AngularJS, vous avez des états, et chaque état est une page séparée. Par exemple. dans un réseau social, vous pouvez avoir un état avec votre flux, un état avec une liste de vos amis, ou un état pour voir un profil, etc. Assez simple. Pas tellement en réaction pour moi.

Supposons donc que j'ai une application de 2 pages: une liste de produits et une vue de produit unique. Quel serait le meilleur moyen de basculer entre eux? 

La solution la plus simple est d’avoir un objet qui a un stateName et un boolean 

constructor() {
  super();

  this.state = {
    productList: true,
    productView: false
  }
}

Et puis quelque chose comme ça dans votre render () function 

return() {
  <div className="App">
    // Or you could use an if statement
    { this.state.productList && <ProductList /> }
    { this.state.productView && <ProductView product={this.state.product} /> }
  </div>
}

Assez simple, non? Bien sûr, pour une application de 2 pages qui est.

Mais que se passe-t-il si vous avez une grande application avec 10 , 20 , 100 pages? Le retour () partie du rendu serait un désordre, et il serait insensé de suivre le statut de chaque état.

Je crois qu'il devrait y avoir un meilleur moyen d'organiser votre application. J'ai essayé de chercher sur Google, mais je n'ai rien trouvé d'utile (sauf pour utiliser si sinon ou opérateurs conditionnels ).

javascriptreactjsstate
6
Alexander Donets

Je vous recommande de vérifier réagir-routeur pour résoudre cette situation

Il vous permet facilement de créer des itinéraires personnalisés comme ceci:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default BasicExample;
5
manelgarcia

Le problème que vous avez mentionné peut être abordé comme suit: comment traiter le routage dans l'application. Pour cela, jetez un œil aux solutions disponibles telles que react-router .

Vous pouvez également résoudre ce problème en déplaçant le rendu de la logique de différentes pages vers un composant, puis restitueriez la page en fonction des données transmises en tant qu'éléments. Pour cela, vous pouvez utiliser un ancien et simple objet JavaScript.

0
Andrzej Smyk