Verstehen ReactJS Router mit einem grundlegenden Beispiel (NodeJS)

View more Tutorials:

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 Projekt   React 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

View more Tutorials: