Мой опыт изучения React в LearnFactory был потрясающим, я создал демонстрационную веб-страницу футбольной команды со страницей регистрации и входа и пятью другими страницами. Я использовал эту веб-страницу, чтобы изучить и попрактиковаться в концепции React Router.
В этой статье я рассмотрю различные концепции response-router-dom, такие как Link, NavLink, Redirect, Route, Switch, BrowserRouter, используя в качестве примера веб-страницу.
Начало работы
Для начала давайте начнем с установки пакета response-router-dom, поэтому внутри вашего проекта React выполните следующую команду, используя свой терминал (Linux или MAC) или командную строку (Windows):
npm install --save react-router-dom
Определение понятий:
React-Router: React Router - это стандартная библиотека маршрутизации для React. Из документов:
React Router синхронизирует ваш пользовательский интерфейс (UI) с URL-адресом. Он имеет простой API с мощными функциями, такими как отложенная загрузка кода, динамическое сопоставление маршрутов и встроенная обработка перехода местоположения. Сделайте URL-адрес вашей первой мыслью, а не последствием.
React Router позволяет нам создавать одностраничное веб-приложение с навигацией без обновления страницы при навигации пользователя. React Router использует структуру компонентов для вызова компонентов, которые отображают соответствующую информацию.
Маршрутизатор или маршрутизатор браузера: это родительский компонент, который охватывает все наши компоненты Route.
Switch: компонент Switch помогает нам отображать компоненты только в том случае, если путь совпадает, в противном случае он вернется к компоненту 404 или странице ошибки.
Маршрут: помогает нам создать маршрут, доступный в определенном месте, доступном по URL-адресу.
Ссылка: используется для навигации по различным маршрутам на сайте.
NavLink: выполняет ту же функцию, что и ссылка, а также добавляет атрибуты стиля к активным маршрутам.
Путь: путь, по которому маршрут будет активен.
Перенаправление: перенаправление устанавливает перенаправление на другой маршрут в вашем приложении для поддержки старых URL-адресов.
Давайте попрактикуемся в этих концепциях.
У меня есть семь компонентов для отображения, и все они находятся в моем файле Index.js, который является тем же компонентом, который я визуализирую.
Поскольку мы уже установили response-router-dom, нам нужно импортировать его вместе с другими компонентами, которые мы будем отображать.
Перемещение по URL-адресу.
Index.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import {Switch, Route, BrowserRouter} from 'react-router-dom';
import Login from './components/Login';
import Profile from './components/Profile';
import About from './components/About';
import Register from './components/Register';
import Comment from './components/Comment';
import Error from './Error';
На следующем шаге мы создаем наш компонент (вы можете использовать компонент с состоянием или без него). Я буду использовать компонент с отслеживанием состояния.
class Index extends Component {
render() {
return (
<div className="App">
<BrowserRouter>
<Route path="/register" component={Register} />
<Route path="/" component={Login} />
<Route path="/home" component={App} />
<Route path="/about" component={About} />
<Route path="/profile" component={Profile} />
<Route path="/comment" component={Comment} />
</BrowserRouter>
</div>)
}
}
В приведенном выше компоненте у нас есть BrowserRouter, обертывающий все наши маршруты.
У нас также есть наш компонент Route с двумя реквизитами: path (путь для активного маршрута) и component (компонент, который будет отображаться, когда пользователь переходит к пути)
Маршрут с путем = ”/” обычно является домашней страницей или первой страницей, которую пользователь увидит после посещения вашего сайта, в моем приложении это страница входа в систему.
Если мы перейдем сейчас, мы столкнемся с проблемой. У нас одновременно отображаются 2 или более страниц, потому что наш путь входа в систему - ’/’, а другие пути также имеют (косую черту) / перед именами путей ’, например путь к компоненту "О программе" - ‘/ about’.
S lash одинаков во всех путях, поэтому он отображает несколько компонентов, чтобы остановить это поведение, нам нужно использовать точную опору в пути входа.
Итак, мы бы изменили наш путь входа в систему следующим образом:
<Route exact path="/" component={Login} />
Итак, наше приложение работает правильно.
Следующим шагом нам нужно создать страницу 404 или страницу с ошибкой, которая будет отображаться в случае, если наши пользователи перейдут по неправильному пути, отсутствующему на нашем веб-сайте.
Я уже создал страницу с ошибкой и импортировал ее. Я бы сейчас добавил маршрут на страницу с ошибкой. Чтобы создать маршрут к 404-й странице или странице с ошибкой, см. Формат ниже:
<Route component={Error} />
Теперь приступим к навигации, у нас снова ошибка. На любой странице, на которую мы переходим, также отображается страница с ошибкой.
Мы можем исправить это, обернув наши компоненты Route в компонент Switch.
Компонент Switch будет внутри нашего компонента BrowserRouter.
Теперь у нас должно получиться что-то вроде этого.
class Index extends Component {
render() {
return(
<div className="App">
<BrowserRouter>
<Switch>
<Route path="/register" component={Register} />
<Route exact path="/" component={Login} />
<Route path="/home" component={App} />
<Route path="/about" component={About} />
<Route path="/profile" component={Profile} />
<Route path="/comment" component={Comment} />
<Route component={Error} />
</Switch>
</BrowserRouter>
</div>)
}
}
Теперь наше приложение перемещается правильно, и мы добавили все отображаемые компоненты.
Наконец, нам нужно, чтобы пользователи нашего сайта могли легко перемещаться по различным страницам нашего сайта, нажимая на ссылки / навигационные ссылки или кнопки.
У меня уже есть NavLinks (для перехода к различным компонентам на сайте), отображаемые в моем заголовке, и ссылка на моей странице ошибки (для перенаправления пользователя обратно на домашнюю страницу).
Link и NavLink переводят опору в "" путь, уже определенный в нашем Index.js внутри нашего компонента BrowserRouter.
<Link className='error' to="/home">Go back to home page</Link>
<NavLink to="/home" className="appy" activeClassName="active" style={{ textDecoration: 'none' }}>
<li>HOME</li>
</NavLink>
<NavLink to="/about" className="appy" activeClassName="active" style={{ textDecoration: 'none' }}>
<li>ABOUT</li>
</NavLink>
Еще одна вещь, помните, мы используем NavLinks для добавления атрибутов стиля на активных маршрутах. Поэтому я хочу, чтобы цвет фона NavLink страницы, на которой я нахожусь, был черным.
На картинке ниже показано, чего я хочу достичь:
Чтобы добиться этого, я бы применил свой стиль к activeClassName (который назван «active», как указано выше), а не к className.
.active {
background: black;
}
Теперь мы можем перемещаться по сайту, и все работает нормально.
Примечание: в проекте есть страница регистрации и входа, и вам нужно будет создать учетную запись, а затем войти в систему, чтобы получить доступ к домашней странице по ссылке ниже. Буду признателен за ваши комментарии к проекту.
Https://landingpage.danekehu.now.sh
Пожалуйста, посмотрите ниже ссылку на мой репозиторий на git hub:
Https://github.com/Ubanna/Landing_page_react
Спасибо.
