codestory

Verstehen ReactJS Router mit einem grundlegenden Beispiel (NodeJS)

  1. Was ist React Router?
  2. Das Projekt erstellen und die Bibliothek installieren
  3. Die Kode schreiben

1. Was ist React Router?

React Router ist eine Standard Routing-Bibliothek in React. Er haltet die Interface der Applikation synchron mit URL auf dem Browser. React Router erlaubt Sie bei dem klaren Routing vom "Datenfließen"(data flow) in Ihrer Applikation. Es ist äquivalent mit der Behauptung, wenn Sie diese URL haben, ist sie gleichwertig mit dieser Route und die Interface sieht wie folgend aus!

Die Idee vom Router ist wirklich sehr nutzlich denn Sie arbeiten wesentlich mit React , einer Bibliothek Javascript um die einseitige Applikationen (Single Page Application) zu programmieren. Um die Applikation React zu entwickeln, müssen Sie sehr viele Component schreiben aber brauchen nur eine einzige File zur Bedinung des Benutzer. Das ist index.html.

React Router hilft Ihnen bei der Definition der dynamischen URL und bei der Auswahl der entsprechenden Component um auf dem jeden URL entsprechenden Browser der Benutzer anzuzeigen.
<BrowserRouter> vs <HashRouter>
React Router bietet 2 Teile <BrowserRouter> & <HashRouter> an. Die 2 Teile unterscheiden sich in dem URL Stil, die erstellen und synchronieren werden.
// <BrowserRouter>
http://example.com/about

// <HashRouter>
http://example.com/#/about
<BrowserRouter> wird mehr üblich benutzt. Es benutzt History API in HTML5 um das Geschichte Ihres Routing zu verfolgen. Inzwischen benutzt <HashRouter> das hash vom URL (window.location.hash) um alle Dinge zu erinnern. Wenn Sie vorhaben, die alten Browser zu unterstützen, sollen Sie mit <HashRouter> anbinden, oder wenn Sie eine Applikation React mit der Verwendung vom Router in die Seite vom Klient erstellen möchten, ist <HashRouter> eine günstige Auswahl.
<Route>
Das Element <Route> definiert ein Mapping zwischen URL und ein Component. D.h, wenn der Benutzer eine URL auf dem Browser besucht, wird ein entsprechende Component auf die Interface gerendert werden.
<BrowserRouter>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</BrowserRouter>


<HashRouter>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</HashRouter>

Das Attribut exact wird in <Route> verwendet um zu sagen, dass diese <Route> nur funktioniert wenn URL auf dem Browser der Wert ihres Attribut path absolut entspricht.

<BrowserRouter>
...
<Route path="/about" component={About}/>
...
</BrowserRouter>

http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!
http://example.com/about/something ==> OK Work!
http://example.com/about/a/b ==> OK Work!

-------------------

http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!

<HashRouter>
...
<Route path="/about" component={About}/>
...
</HashRouter>

http://example.com#/about ==> OK Work!
http://example.com#/about/somthing ==> OK Work!

----------------

http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!

<BrowserRouter>
...
<Route exact path="/about" component={About}/>
...
</BrowserRouter>


http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!

-------------

http://example.com/about/something ==> Not Work!
http://example.com/about/a/b ==> Not Work!

http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!

<HashRouter>
...
<Route exact path="/about" component={About}/>
...
</HashRouter>

http://example.com#/about ==> OK Work!

----------------

http://example.com#/about/somthing ==> Not Work!
http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!

2. Das Projekt erstellen und die Bibliothek installieren

Zuerst brauchen Sie das Tool create-react-app installieren und ein ProjektReact mit dem Name vom react-router-basic-app erstellen:
# Install tool:

npm install -g create-react-app

# Create project named 'react-router-basic-app':

create-react-app react-router-basic-app
Ihr Projekt wurde erstellt:
Zum nächsten machen Sie CD in das erstellte Projekt und führen Sie das folgende Command durch um die Bibliothek react-router-dom in Ihrem Projekt zu installieren:
# CD to your project

cd react-router-basic-app

# Install react-router-dom library:

npm install --save react-router-dom
Öffnen Sie Ihr Projekt auf einem Ihnen gewöhnenden Bearbeiter (z.B Atom). Bei der Öffnung der File package.json werden Sie sehen, dass die Biliothek react-router-dom in Ihrem Projekt eingefügt wurde.
Starten Sie Ihre Applikation:
# Start App

npm start

3. Die Kode schreiben

Nach der Löschung der 2 Files App.css & App.js werden wir die Kode für diese 2 Files schreiben.
App.css
.main-route-place {
  border: 1px solid  #bb8fce;
  margin:3px;
  padding: 5px;
}

.secondary-route-place {
  border: 1px solid #a2d9ce;
  margin: 5px;
  padding: 5px;
}
App.js
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

import './App.css';

class App extends React.Component {

  render()  {
    return  (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>

          <hr />
          <div className="main-route-place">
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
          </div>
        </div>
      </BrowserRouter>
    );
  }

}

class Home extends React.Component {

  render()  {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
}

class About  extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
}

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

        <div className="secondary-route-place">
          <Route
            path={`${this.props.match.url}/:topicId`}
            component={Topic} />
          <Route
            exact
            path={this.props.match.url}
            render={() =>
              <h3>
                Please select a topic.
              </h3>
            }
            />
        </div>
      </div>
    );
  }
}

class Topic extends React.Component {
  render()  {
    return (
      <div>
        <h3>
          {this.props.match.params.topicId}
        </h3>
      </div>
    );
  }
}

export default App;
Sie brauchen nichts in die File index.js & index.html ändern:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
  </body>
</html>
Die Applikation laufen und das Ergebnis auf dem Browser sehen

Anleitungen ReactJS

Show More

Neueste Artikel

Show More