Автор оригинала: Kayode Adeniyi.
Мы будем использовать пример приложения, которое я создал в одном из моих предыдущих постов. Нажмите здесь Чтобы получить приложение образца или прочитать Simplest React App Setup сделать это самостоятельно.
Вступление
Согласно Документы ,
React Router – это полная библиотека маршрутизации для реагирования. React Router сохраняет ваш интерфейс синхронизации с URL. Он имеет простые API с мощными функциями, такими как ленивый код загрузки, динамический маршрут, а также обращение с переходом местоположения, построенный вправо. Сделайте URL-адрес вашей первой мыслью, а не после того, как последует.
Настройка маршрута RACT необходимо только для приложений, которые имеют более одной страницы. Этот пост о базовой настройке. В моем следующем посте мы возьмем более глубокий взгляд в реактивный маршрут.
Настраивать
Если вы следили за инструкцией выше, у вас должно быть установлено образец приложения.
Для начала, давайте установим React-Router.
Запустить
npm install --save react-router
В настоящее время наше приложение является приложением одним страницей, поэтому давайте создадим два компонента: О.Ойс & Appcontainer.js Отказ О.Ойс будет компонентом для наших о странице в то время как Appcontainer.js будет содержать общий контент, который необходимо иметь все страницы. Например, Navbar.
Запустить
touch components/About.js components/AppContainer.js
Скопируйте и вставьте это в О.Ойс Отказ
import React from 'react'
const About = () => This is an about page
export default About
Кроме того, скопируйте и вставьте код ниже в Appcontainer.js.
import React from 'react'
import { Link } from 'react-router'
const AppContainer = props => {
return (
Home
{ ' | ' }
About
{props.children}
)
}
export default AppContainer
Далее давайте создадим Маршруты.js файл.
Запустить
touch routes.js
Затем скопируйте и вставьте код ниже в нем.
import React, { Component } from 'react'
import { Route, IndexRoute } from 'react-router'
import HelloWorld from './components/HelloWorld'
import About from './components/About'
import AppContainer from './components/AppContainer'
export default (
)
Следующая вещь для обновления app.js Файл для ссылки Маршруты.js и больше не Helloworld.js через компонент маршрутизатора из React-Router.
Удалить код в app.js Затем скопируйте и вставьте это
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, hashHistory, browserHistory } from 'react-router'
import routes from './routes'
ReactDOM.render(Маршрутизатор имеет свойство под названием история. Реагистрационный маршрутизатор обеспечивает два разных вида истории, которые могут быть переданы в него. Большинство настроек благосклонности браустреристория над Hashhistory потому что Hashhistor y не Seo дружелюбный, и его URL-адреса уродливы.
Теперь давайте начнем наш сервер и посмотрим, что у нас есть.
Запустить
npm install && npm start
Теперь, если вы перемещаетесь в приложение в браузере, вы должны увидеть компонент HellowOrld. Кроме того, когда вы нажимаете об ссылке, вы должны увидеть компонент о компонентах.
Если вы хотите, чтобы уборщик SEO дружественный URL или вы используете это в производстве, то браустреристория это путь к работе. Вы можете узнать больше о браустреристория против Hashhistory Отказ
Теперь обновите маршрутизатор часть кода в App.js вот так
Ваше приложение все равно будет работать, как ожидалось. Вы должны быть в состоянии посетить обе страницы.
Если вы пытаетесь посетить о компонентах http://localhost: 8080/О вставляя маршрут непосредственно в адресную строку или перезагрузить страницу, вы получите
Не может получить/о
Когда вы используете браустреристория , у вас должен быть сервер, который всегда будет возвращать ваш index.html на любом маршруте. Обработка этой ошибки необходима, потому что пользователи вашего приложения могут добавить ссылку, которая не является маршрутом индекса. Для этого учебника мы будем использовать экспресс-сервер.
Чтобы установить это для Node.js, запустить
npm install --save express path
Тогда создайте server.js файл
touch server.js
и вставьте конфигурацию ниже в нее.
const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()
// serve static assets normally
app.use(express.static(__dirname + '/public'))
// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})
app.listen(port)
console.log("server started on port " + port)
Проверьте это ссылка Чтобы узнать больше на браустреристория Отказ
Обновите свой WebPack.config файл, чтобы выглядеть так
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'app'),
output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']}
]
}
}
Примечание. Мы удалили основные настройки для WebPack-Dev-Server. Это больше не нужно, так как у нас теперь есть экспресс-сервер. Посещение здесь Чтобы узнать больше о WebPack-Dev-Server.
Вы можете запустить ваше приложение, запустив:
webpack && node server.js
Копирование и вставку маршрута напрямую должно работать должным образом. Поскольку WebPack-Dev-Server больше не используется, любые изменения, которые мы делаем на файле, не будет замечено WebPack. Для просмотра файлов необходимо продолжить, требуется настройка конфигурации. Давайте установим NPM-Run-all – Модуль для запуска нескольких команд на терминале, не обязательно ожидая, когда их закончить.
Запустить
npm install --save npm-run-all
Тогда давайте обновим наш Package.json файл. Раздел сценариев должен иметь код ниже:
"scripts": {
"start": "npm-run-all --parallel webpack:build server",
"webpack:build": "webpack -w",
"server": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
Теперь ваше приложение может быть запущено с NPM Start. Если все прошло хорошо, вы должны быть в состоянии посетить http://localhost: 8080/ а также http://localhost: 8080/О Отказ
Вот подробный учебник о том, как рендеринг на боковом сервере с работой Redux и React-Router!