Рекомендации по маршрутизатору React

Объясните response-router и react-router-dom.

Маршрутизатор React под названием «Динамический маршрутизатор»

Во многих фреймворках, таких как Rails, Express.js и Anglerjs, мы используем статический маршрутизатор, который настраивается в начале вашего приложения. В приложении rails у нас есть файл routes.rb в этом файле, который мы создаем или маршрутизируем для запуска приложения с его контроллера.

Но здесь, с маршрутизатором React, забудьте об этом, мы можем настроить или маршрутизировать, когда захотим, в каком файле мы хотим, как мы хотим.

Простой пример

Я буду использовать create-react-app для создания этого примера, и нам нужно установить некоторые зависимости, такие как nodejs, npm внутри него и response-router-dom с помощью npm / yarn.

Создать проект:

в терминале написать

простой пример создания приложения-реакции

и переходит в его папку в терминале

cd простой пример

теперь мы находимся в простом примере, и теперь мы установим response-router-dom, используя npm, который уже установлен, мы все еще внутри терминала

npm установить реактивный маршрутизатор-дом

после установки всех зависимостей мы можем кодировать.

в файле index.js, созданном с помощью create-react-app, мы деформируем компонент ‹App /› компонентом Router ‹BrowserRouter›

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
{/* Router is the core of every react router component */}
<BrowserRouter>
  <App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();

Компонент маршрутизатора в реагирующем маршрутизаторе

Он должен лежать в основе каждого приложения для реагирующего маршрутизатора, мы можем выбрать один из двух компонентов, ‹BrowserRouter› или ‹HashRouter›. Оба они создадут для вас специализированный объект history. и если у вас есть статический файл сервера, например, для работы с API, используйте HashRouter вместо BrowserRouter.

Маршрут, ссылка и NavLink

после инициализации первого шага использования компонента Route ‹BrowserRouter›, который предоставляется из response-router-dom. мы должны построить или настроить маршрут и ссылки для навигации по маршруту.

в App.js мы создадим навигационные ссылки и настроим его маршрут динамически, без необходимости в файле маршрутов, как в среде Rails. мы будем использовать компонент ‹NavLink› из response-router-dom с искаженными ссылками, например, и создать тег ‹a› в html. напишите код после конца тега ‹/header›
‹div className = 'nav'›

  <ul>
    <li><NavLink to="/home">Home</NavLink></li>
    <li><NavLink to="/next">Next</NavLink></li>
    <li><NavLink to="/last">Last</NavLink></li>
  </ul>
</div>

Теперь мы можем настроить маршрут компонента ‹NavLink›. но прежде чем сделать это, я хочу вкратце поговорить о компоненте ‹Link›. Мы можем использовать любой из компонентов ‹NavLink› или ‹Link› для навигации по настроенным маршрутам, но основное различие между ними, как я сейчас, это ‹NavLink› дает нам свойства activeClassName для создания класса для активной ссылки, наиболее используемого для css. Имя класса по умолчанию, созданное ‹NavLink›, - .active.

{/* activeClassName value can be an name to modify it in css styles */}
<NavLink activeClassName='any-name' to="/home">Home</NavLink>
{/* don't use the same in <Link> below is wrong use of <Link >*/}
<Link activeClassName='any-name' to="/home">Home</Link>

Настройте маршрут в файле App.js

<div className="App-intro">
  <Route path='/home' exact component={Home} />
  <Route path='/next' component={Next} />
  <Route path='/last' component={Last} />
  <Redirect to='/home' />
</div>

‹Route› отображает компонент, если он соответствует имени пути, например:

http://localhost:3000/home

этот url ^ path будет отображать домашний компонент внутри компонента App.js. точные реквизиты, убедитесь, что путь находится в точности до дома, см. первый ‹NavLink›

приложение в основном готово, просто создайте Home.js, Next.js и Last.js и импортируйте их в начало App.js

// src/Home.js
import React from 'react';

let Home = () => {
 return(
   <div>
     <h1> Hey I'm Home </h1>
   </div>
  )
}

export default Home

Next.js и Last.js такие же, как и выше, только текст изменится

пример находится на github URL: https://github.com/mohammedOmer/simple-routing-in-react

Инструкция по установке внутри README.md в репозиторий.

Заключение

response-router-dom предоставит все компоненты response-router
‹NavLink› лучше, чем ‹Link› для пользовательского интерфейса, если он находится в общем виде в виде верхнего или нижнего колонтитула.
config Router при запуске приложения, такого как index.js, для правильного запуска ‹Route›

Всего наилучшего взлома на Вашем пути. Мохаммед Алжефри Разработчик полного стека в ClickApps co, хлопните меня по кнопке хлопка ниже, если вам понравилась эта статья