Рассмотрим ситуацию, когда приложение, которое использует маршрутизацию, разбито на отдельные файлы, и для его сборки используется 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.