So wenden Sie Routing in React Router 4.0 oder höher an

Dieser Artikel stellt Ihnen hauptsächlich die detaillierte Erklärung der Routing-Anwendung von React Router 4.0 und höher vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

In React Routern unter 4.0 können verschachtelte Routen in der folgenden Form in einem Router-Tag platziert werden, und verschachtelte Routen werden auch direkt zusammen platziert.

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

Aber nach 4.0 ist das verschachtelte Routing völlig anders als zuvor und muss für die Verarbeitungsroute separat in der verschachtelten Stammkomponente platziert werden, andernfalls wird dies der Fall sein Seien Sie immer eine Warnung:

Sie sollten nicht in derselben Route verwenden

Die korrekte Form ist wie folgt

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

Kommentieren Sie das obige verschachtelte Routing aus

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

Fügen Sie auf der Komponente, die ein verschachteltes Routing erfordert, ein neues hinzu Route in

Ein vollständiges Beispiel für eine verschachtelte Route lautet wie folgt

Anweisungen und Vorsichtsmaßnahmen

1 Der folgende Code ist im ES6-Format

2. Die React-Router-Dom-Version ist 4.1.1

3. Bitte achten Sie darauf, den Verlauf wie HashRouter zu verwenden, da sonst immer eine Warnung angezeigt wird und nicht gerendert werden kann

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

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

Verwandte Empfehlungen:

Detaillierte Erläuterung des dynamischen Routings des Vue-Routers und Beispiele für verschachteltes Routing

Verzögertes Laden des Angular-Moduls mithilfe von Routing

Erklärung der Vue-Router2-Implementierung der Routing-Funktion

Das obige ist der detaillierte Inhalt vonSo wenden Sie Routing in React Router 4.0 oder höher an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!