Выравнивание с реагированием: реагировать маршрутизатор

Здравствуйте, World👋 В этой статье в блоге мы узнаем концепцию React Router и построить простой Однострановое приложение (SPA) Использование реагирования.

Что будет покрыто в этом блоге

- Introduction to react-router-dom
- React Router Components
- React Router Installation
- Let's create the SPA

Давайте начнем!

Маршрутизация – это ключевая часть всех веб-приложений. Он играет центральную роль в статических HTML-страницах, а также в самых сложных реагированных веб-приложениях. React Router – это стандартная библиотека, которая позволяет навигаться между различными страницами без перезагрузки всей вашей страницы. Он сохраняет URL-адрес браузера в синхронизации с UI (данные, которые будут отображаться на веб-странице). Он в основном используется для создания одностраничных веб-приложений.

Библиотека React Router содержит три разных пакета NPM для маршрутизации.

Реагистрационный маршрутизатор Предоставляет основную библиотеку маршрутизации, которая используется в качестве одноранговой зависимости для двух других пакетов, перечисленных ниже.
React-Marriter – родной в основном используется для Реагировать родным Приложения.
React-Router-DOM используется в реагированных приложениях для маршрутизации.

Основные компоненты React Router, обычно используемые в минимальной навигации, являются брусорупорными, маршрут, переключатель и ссылка.

Userbouter.

Бросастрограф использует API истории HTML5 (Pushstate, RecordeState и событие POSPSTATE), чтобы сохранить UI в синхронизации с URL. Чтобы включить маршрутизацию на стороне клиента, нам нужно импортировать Бросастрофер от React – DOM-маршрутизатор Пакет, а также оберните все наши приложение внутри RUSBERTER. Если вы не знакомы с маршрутизацией на стороне клиента, вы можете узнать его из здесь Отказ

Пример:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
    
      
    ,
  rootElement
);

Переключатель
Компонент коммутатора будет представлять только первый маршрут, который соответствует/включает в себя путь, а не рендурирующий все соответствующие маршруты. Это не принимает никаких реквизитов. Кроме того, он позволяет правильно работать вложенные маршруты, что является чем-то, что маршрутизатор не сможет обрабатывать.

Пример:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
 
       
         
         
         
       
  ,
         rootElement
   );

Маршрут

Маршрут используется для визуализации компонента на основе указанного пути. Обычно это определяется с двумя видами и компонентами. Здесь путь представляет собой маршрут URL, а компонент представляет собой страницу или компонент, который мы хотим рендерировать на этом пути. Если путь для маршрута установлен на просто «/», Переключатель всегда визуализирует этот маршрут для всех путей, как это совпадение. Например, если путь мы на это /войти Этот путь включает в себя / Отказ Пока он включает в себя характер, он будет считаться совпадением, который включает в себя вложенные маршруты. Чтобы решить эту проблему, мы включаем еще одну опору для этого маршрута, точный Отказ Как подразумевает имя, путь должен быть одинаковым.

Пример

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
 
         
         
         
  ,
         rootElement
   );

Связь

Поскольку имя указывает, что этот компонент используется для создания ссылок, которые позволяют приложению перемещаться по разным URL-адресам и представлять его контент без перезагрузки всей веб-страницы. Это определяется только одним опорами к Отказ к Представляет, где перенаправить на клик.

Пример

Click to redirect

Теперь я объясню, как я создал простой спа, используя React Routing. Чтобы начать работу, сначала давайте создадим приложение React.

npx create-react-app routing-app

Если вы не знакомы с этой командой, вы можете узнать больше от Начало работы Create-ract .

Затем установите React-Router-DOM упаковка.

npm install react-router-dom

Наконец, запустите сервер Dev

npm start

Затем добавьте зависимость React-Router-DOM в Package.json. Давайте начнем создавать страницы контента в первую очередь Во-первых, создайте файл home.js в каталоге SRC и добавьте следующий контент:

Home.js.

import React, { Component } from "react";

class Home extends Component {
  render() {
    return (
      
        Welcome to Hashnode!!
        
        Hashnode is the easiest way to start a developer blog on your 
        personal domain 🌏 for free and connect with the readers through 
        our global dev community! 👩‍💻👨‍💻
        
      
    );
  }
}

export default Home;

Далее создайте файл Signin.js в том же месте: signin.js.

import React, { Component } from "react";


class SignIn extends Component {
    handleClick  = ()=>
    {
            alert("Thank you for signing in 😀.");
    }

    render() {
    return (
        <>
        
            SignIN
            Username

            
            



            Password

            
            



            
            
        
        );
  }
}

export default SignIn;

У нас просто еще одна страница. Создать файл fightup.js в папке SRC: fignup.js.

import React, { Component } from "react";

class SignUp extends Component {

    handleClick  = ()=>
    {
            alert("Thank you for signing in 😀.");
    }

    render() {
    return (
        <>
        
            SignUp
            Username

            
            



            Enter Email

            
            


            Password

            
            


            
            
        
        );
  }
}

export default SignUp;

Это все, что мы собираемся показать на нашей веб-странице. Обязательно сохраните все изменения этих трех файлов. Мы посмотрим, как сделать их полезными в ближайшее время.

Начнем работать на нашем файле App.js У нас есть наш кадр приложений в виде наших Приложение компонент. У нас есть наши контентные страницы, представленные Главная , Signin и Регистрация компоненты. Что нам нужно сделать, это связать все это вместе, чтобы создать наше приложение. Это где находится React Router. Чтобы начать использовать его, перейдите в файл App.js и импортируйте следующие пакеты:

import React from 'react';
import {
  Route,
  Link,
  BrowserRouter
} from "react-router-dom";
import Home from './home.js';
import SignIn from './signin.js';
import SignUp from './signup.js';

Мы импортируем маршрут, ссылку и брусорупорность из пакета React-Router-DOM NPM, который мы установили ранее. Кроме того, мы также импортируем компоненты нашего дома, входа и регистрации.

App.js.

import React from 'react';
import {
  Route,
  Link,
  BrowserRouter
} from "react-router-dom";
import Home from './home.js';
import SignIn from './signin.js';
import SignUp from './signup.js';

class App extends React.Component {  
render() {  
 return ( 
      
    
   Simple SPA  
        
            Home
            SignIn
            SignUp
          
          
            
            
            
          
    
    
    )  
 }  
}  
export default App;

Как я уже объяснил функцию и нужно все, что мы использовали в нашем файле App.js. Надеюсь, вы четко понимаете вещи. Если у вас есть какие-либо сомнения, дайте мне знать в разделе комментариев.

Добавление некоторых CSS. Прямо сейчас наше приложение полностью не скрывается. В вашей папке SRC создайте файл, называемый style.css и добавить в него следующие правила стиля:

body {
  background-color: #FFCC00;
  padding: 20px;
  margin: 0;
  font-size: 25px;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
  text-align: center;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #111;
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
a:hover
{
    background-color: blue;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
input
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
}
button
{
    width: 30%;
  background-color: blue;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  margin-left: 500px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Мы почти сделали здесь! Есть всего лишь еще несколько вещей, которые нам нужно сделать. Нам нужно ссылаться на этот стиль листа в нашем приложении. В верхней части index.js добавьте оператор импорта, чтобы сделать только что:

index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './style.css';


ReactDOM.render(

  
, 
  document.getElementById("root")
);

После того, как вы последовали все шаги, перейдите в наш браузер, и ваша веб-страница выглядит так:

Когда вы нажимаете на кнопку Signin, путь изменяется на /Войти И страница будет переходить к Signin Компонент без перезагрузки вашего приложения. Точно так же, когда вы нажимаете на кнопку регистрации, путь изменения в /зарегистрироваться И страница будет переходить к Регистрация Компонент без перезагрузки вашего приложения.

React Router – это потрясающий инструмент, который может иметь большую помощь вашему приложению. Я надеюсь, что эта демонстрация предоставляет вводное руководство по реагированию маршрутизатора.

Вы можете найти весь код в моем Репозиторий GitHub Отказ Снимите звезду, если вы найдете это полезным.

Спасибо за чтение, я бы ❤ подключиться с вами на Twitter |. Linkedin.

Поделитесь своими запросами в разделе комментариев.

Ресурсы

Увидимся в моем следующем статье блога, берегите внимание !!

Оригинал: “https://dev.to/nehasoni__/leveling-up-with-react-react-router-1npe”

Что будет покрыто в этом блоге

Userbouter.

Переключатель

Маршрут

Связь

Welcome to Hashnode!!

SignIN

SignUp

Simple SPA

Ресурсы

Читайте ещё по теме: