React-router и webpack
Рассмотрим ситуацию, когда приложение, которое использует маршрутизацию, разбито на отдельные файлы, и для его сборки используется webpack.
Вначале создадим новый проект и создадим в проекте файл package.json со следующим определением пакетов:
{
"name": "routerapp",
"description": "A React.js router project using Webpack",
"version": "1.0.0",
"author": "metanit.com",
"scripts": {
"dev": "webpack serve --mode=development",
"build": "webpack"
},
"dependencies": {
"react": "18.0.0",
"react-dom": "18.0.0",
"history": "5.3.0",
"react-router": "6.3.0",
"react-router-dom": "6.3.0"
},
"devDependencies": {
"@babel/cli": "7.17.0",
"@babel/core": "7.17.0",
"@babel/preset-react": "7.16.0",
"babel-loader": "8.2.0",
"webpack": "5.70.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.11.0"
}
}
Далее определим в проекте файл html-страницы index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Маршруты в React</title>
<style>a{padding: 4px;}</style>
</head>
<body>
<div id="app"></div>
<script src="public/bundle.js"></script>
</body>
</html>
Непосредственно для файлов приложения определим в проекте папку app. А для хранения компонентов в папке app создадим каталог components. Затем в папку app/components добавим файл home.jsx:
import React from "react";
export default function Home(){
return <h2>Главная</h2>;
}
Далее также в папке app/components определим второй компонент в файле products.jsx:
import React from "react";
export default function Products(){
return <h2>Товары</h2>;
}
И также в эту же папку добавим еще один компонент в файле notfound.jsx:
import React from "react";
export default function NotFound(){
return <h2>Ресурс не найден</h2>;
}
Для перехода по ссылкам к этим компонентам определим в каталоге app/components дополнительный компонент навигации и для этого добавим файл nav.jsx:
import React from "react";
import {Link} from "react-router-dom";
export default function Nav(){
return <div>
<Link to="/">Главная</Link>
<Link to="/products">Товары</Link>
</div>;
}
Это все компоненты, которые мы будем использовать. Далее в папке app определим главный файл приложения app.jsx:
import ReactDOM from "react-dom/client";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Nav from "./components/nav.jsx";
import Home from "./components/home.jsx";
import Products from "./components/products.jsx";
import NotFound from "./components/notfound.jsx";
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<Router>
<div>
<Nav />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</Router>
);
Здесь подключаются и используются все ранее определенные компоненты.
И для сборки файлов в корневой каталог проекта добавим файл конфигурации webpack - webpack.config.js:
const path = require("path");
module.exports = {
entry: "./app/app.jsx", // входная точка - исходный файл
output:{
path: path.resolve(__dirname, "./public"), // путь к каталогу выходных файлов - папка public
publicPath: "/public/",
filename: "bundle.js" // название создаваемого файла
},
devServer: {
historyApiFallback: true,
static: {
directory: path.join(__dirname, "/"),
},
port: 8081,
open: true
},
module:{
rules:[ //загрузчик для jsx
{
test: /\.jsx?$/, // определяем тип файлов
exclude: /(node_modules)/, // исключаем из обработки папку node_modules
loader: "babel-loader", // определяем загрузчик
options:{
presets:[ "@babel/preset-react"] // используемые плагины
}
}
]
}
}
В итоге весь проект будет выглядеть следующим образом:
И в конце установим все пакеты с помощью команды npm install и запустим проект на выполнение с помощью команды npm run dev.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи