В React передача данных через react-router осуществляется с помощью параметров маршрута (route parameters) и/или состояния маршрута (route state).
Первый способ - использование параметров маршрута. Вы можете определить определенный путь в вашем маршрутизаторе с динамическим параметром, например, ":id", чтобы передать данные через URL. В компонентах, соответствующих этому пути, вы можете получить данные из параметров маршрута с помощью react-router Hooks или HOC (Higher Order Component).
Например, предположим, у вас есть маршрут "/user/:id", где :id - это параметр маршрута, который должен хранить id пользователя. В компоненте, соответствующем этому маршруту, вы можете получить доступ к параметрам маршрута с помощью react-router Hooks:
import { useParams } from "react-router-dom"; function UserComponent() { const { id } = useParams(); // Используйте полученный id для получения данных пользователя // ... return ( <div> <h1>User Details</h1> <p>ID: {id}</p> </div> ); } export default UserComponent;
Второй способ - использование состояния маршрута. Состояние маршрута - это объект, содержащий данные, переданные через маршрут. Вы можете передать это состояние при переходе на другой маршрут с помощью метода history.push()
или Link
компонента из react-router-dom.
import { Link } from "react-router-dom"; function HomeComponent() { const handleClick = () => { const data = { name: "John", age: 25 }; // Передача данных через состояние маршрута history.push("/user", { data }); }; return ( <div> <h1>Home Page</h1> <button onClick={handleClick}>Go to User Page</button> </div> ); } function UserComponent() { const { state } = useLocation(); // Получить данные из состояния маршрута const data = state?.data || {}; return ( <div> <h1>User Details</h1> <p>Name: {data.name}</p> <p>Age: {data.age}</p> <Link to="/">Go back to Home Page</Link> </div> ); } export default UserComponent;
Оба способа - параметры маршрута и состояние маршрута - предоставляют возможность передать данные в компоненты, связанные с определенными маршрутами. В зависимости от ваших потребностей и требований проекта, вы можете выбрать наиболее подходящий способ для передачи данных через react-router.