Comment utiliser le routage dans React Router4.0 et supérieur-js tutoriel-php.cn

Comment utiliser le routage dans React Router4.0 et supérieur

小云云

Libérer： 2018-02-03 14:51:00

original

2390 Les gens l'ont consulté

Cet article vous présente principalement l'explication détaillée de l'application de routage de React Router 4.0 et supérieur. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Dans React Router inférieur à 4.0, les routes imbriquées peuvent être placées dans une balise de routeur, sous la forme suivante, et les routes imbriquées sont également placées directement ensemble.

<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   <Route path="users/:userId" component={Profile} />
  </Route>
</Route>

Copier après la connexion

Mais après la version 4.0, le routage imbriqué est complètement différent d'avant et doit être placé séparément dans le composant racine imbriqué pour le traitement de l'itinéraire, sinon il y aura soyez toujours un avertissement :

Vous ne devez pas utiliser et dans le même itinéraire

La forme correcte est la suivante

<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   //<Route path="users/:userId" component={Profile} />
  </Route>
</Route>

Copier après la connexion

Commentez le routage imbriqué ci-dessus

const Users = ({ match }) => (
 <p>
  <h2>Topics</h2>
  <Route path={`${match.url}/:userId`} component={Profile}/>
 </p>
)

Copier après la connexion

Sur le composant qui nécessite un routage imbriqué Ajoutez un nouveau route dans

Un exemple complet d'itinéraire imbriqué est le suivant

Instructions et précautions

1 Le code suivant est au format ES6

2. La version de React-Router-dom est 4.1.1

3 Veuillez faire attention à l'utilisation d'un historique tel que HashRouter, sinon il y aura toujours un avertissement et ne pourra pas être rendu
.

import React, { Component } from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
// import { Router, Route, Link, Switch } from &#39;react-router&#39;;
import {
 HashRouter,
 Route,
 Link,
 Switch
} from &#39;react-router-dom&#39;;

class App extends Component {
 render() {
  return (
   <p>
    <h1>App</h1>
    <ul>
     <li><Link to="/">Home</Link></li>
     <li><Link to="/about">About</Link></li>
     <li><Link to="/inbox">Inbox</Link></li>
    </ul>
    {this.props.children}

   </p>
  );
 }
}

const About = () => (
 <p>
  <h3>About</h3>
 </p>
)

const Home = () => (
 <p>
  <h3>Home</h3>
 </p>
)

const Message = ({ match }) => (
 <p>
  <h3>new messages</h3>
  <h3>{match.params.id}</h3>
 </p>
)

const Inbox = ({ match }) => (
 <p>
  <h2>Topics</h2>
  <Route path={`${match.url}/messages/:id`} component={Message}/>

 </p>
) 

ReactDOM.render(
 (<HashRouter>
  <App>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/inbox" component={Inbox} />
  </App>
 </HashRouter>),
 document.getElementById(&#39;root&#39;)
);

Copier après la connexion

Recommandations associées :

react-router4 coopère avec webpack require.ensure pour réaliser un chargement asynchrone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!