Verstehen React Router mit Beispiel auf der Client-Seite

View more Tutorials:

Anleitungen ReactJS

Was ist React Router?
React Router in der Seite Client

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!

React Router ist wirklich sehr nutzlich und wird in die Applikationen React in der Seite von Server mehr populär als in die Applikation React in der Seite vom Client. Es ist konkret, dass React Router in die Applikation React in die Umwelt NodelJS Server normalerweise benutzt. Es erlaubt Sie, die dynamischen URL zu definieren aber der Philosophie "Single Page Application" entsprechen. 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. (So ist es grundlegend)

React Router hilft Ihnen bei der Definition der dynamischen URL und bei der Auswahl der geeigneten Component um auf dem jeder URL entsprechenden Browser des Benutzer zu rendern.

<BrowserRouter> vs <HashRouter>

React Router bietet Sie 2 Teile <BrowserRouter> & <HashRouter> an. Diese 2 Teile unterscheidet sich in das URL Typ, die sie erstellen und synchronieren werden.


// <BrowserRouter>
http://example.com/about
 
// <HashRouter>
http://example.com/#/about

<BrowserRouter> ist mehr popular verwendet. Es benutzt History API in HTML5 um Ihr Routingsgeschicht zu verfolgen. Inzwischen benutzt <HashRouter> das hash vom URL (window.location.hash) um alle Ding zu erinnern. Wenn Sie die alten Browser oder die Router in der Seite benutzende Applikation React unterstützen, ist <HashRouter>eine geeignete Auswahl..

<Route>

Das Element <Route> definiert ein Mapping zwischen ein URL und ein Component. D.h wenn der Benutzer eine URL in dem Browser besucht, wird ein entsprechendes Component in die Interface zu rendern


<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 benutzt in <Route> um zu sagen, dass <Route> funktioniert nur wenn URL auf dem Browser der Wert seines 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!

Wenn Sie ein Beispiel über React Router in die Seite Server (NodeJS) suchen, können die folgenden Artikels Ihnen nutzlich sein

Verstehen ReactJS Router mit einem grundlegenden Beispiel (NodeJS)

2- React Router in der Seite Client

OK, in dieser Unterricht werde ich Sie bei der Erstellung einer Applikation React mit der Benutzung vom React Router in der Seite von Client. Unter ist das das Vorschaubild der Applikation.

: Die notwendigen Bibliotheke für Ihre Applikation

<!-- React & ReactDOM Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

<!-- React Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "router-example.css" />

Wenn Sie eine neure Version der Bibliothek suchen möchten, greifen Sie in die folgenden Link zu.

https://cdnjs.com/

hashrouter-example.css

.product {
   padding: 5px;
   margin-bottom: 15px;
   background-color: #ddd;
}

 .product-nav a {
   background-color: #ddd;
   margin: 5px;
   padding: 5px;
   text-decoration: none
 }

 .selected {
    color: red;
 }

 .route-place {
     margin-top: 10px;
     padding: 30px;
     height: 100%;
     border: 1px solid #ddd;
}

hashrouter-example.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Router</title>

      <!-- React & ReactDOM Libraries -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

      <!-- React Router -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

     <!-- Babel -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

      <!-- CSS -->
      <link rel = "stylesheet" type = "text/css" href = "hashrouter-example.css" />

   </head>
   <body>
      <h3>Client Side ReactJS Router</h3>

      <div id="app"></div>

      <script src="hashrouter-example.jsx" type="text/babel"></script>
   </body>
</html>

hashrouter-example.jsx

// import {BrowserRouter,NavLink} from 'react-router-dom';
// const { HashRouter, NavLink, Route } = ReactRouterDOM;

// Component
class ProductShortInfo extends React.Component {
  render() {
    return (
      <div className="product">
        <h3>Samsung Galaxy S9</h3>
        <p>Price: $900</p>
      </div>
    );
  }
}

// Component
class ProductFeature extends React.Component {
  render() {
    return <h3>Some Features of Samsung Galaxy S9!</h3>;
  }
}

// Component
class ProductImages extends React.Component {
  render() {
    return <h3>Some Images of Samsung Galaxy S9</h3>;
  }
}

// Component
class ProductComments extends React.Component {
  render() {
    return <h3>Some Customer Comments</h3>;
  }
}

//
class Product extends React.Component {
  render() {
    return (
      <ReactRouterDOM.HashRouter>
        <div>
          <ProductShortInfo />

          <div className="product-nav">
            <ReactRouterDOM.NavLink exact to="/" activeClassName="selected">
              Feature
            </ReactRouterDOM.NavLink>

            <ReactRouterDOM.NavLink exact to="/images" activeClassName="selected">
              Images
            </ReactRouterDOM.NavLink>

            <ReactRouterDOM.NavLink to="/comments" activeClassName="selected">
              Comments
            </ReactRouterDOM.NavLink>
          </div>
          <div className="route-place">
            <ReactRouterDOM.Route exact path="/" component={ProductFeature} />
            <ReactRouterDOM.Route exact path="/images" component={ProductImages} />
            <ReactRouterDOM.Route path="/comments" component={ProductComments} />
          </div>
        </div>
      </ReactRouterDOM.HashRouter>
    );
  }
}
//
class App extends React.Component {
  render() {
    return <Product />;
  }
}

// Render
ReactDOM.render(<App />, document.querySelector("#app"));

Achtung: die 2 Teile : <ReactRouterDOM.NavLink> & <ReactRouterDOM.Link> haben die gleiche Gebrauchsweise, , <ReactRouterDOM.NavLink> ist besser denn es unterstützt das Attribut activeClassName ( in das Beispiel nutzlich sein)

View more Tutorials:

Anleitungen ReactJS