Перенаправить определенные URL-адреса с помощью навигации
Навигация в React
Чтобы выполнить перенаправление страницы, мы можем использовать хук useNavigate().
index.js
импортировать { createRoot } из «react-dom/client»;
импортировать { BrowserRouter } из «react-router-dom»;
импортировать «./index.css»;
импортировать приложение из «./App»;
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
‹BrowserRouter›
‹App /›
‹/BrowserRouter›,
);
App.js
импортировать {Routes, Route} из «react-router-dom»;
импортировать «./index.css»;
импортировать Navbar из «./components/navbar/Navbar»;
импортировать Home из «./pages/home/Home»;
импортировать сообщения из «./components/Posts»;
const App = () =› {
return (
‹›
‹Routes›
‹Route path=”/” element={‹Home /›} /›
‹Route path=”/navbar” element={‹Navbar /›} /›
‹Route path=”/posts/*” element={‹Posts /›} /›
‹/ Маршруты›
‹/›
);
};
экспортировать приложение по умолчанию;
У нас также могут быть вложенные маршруты, и мы можем отображать что-то конкретное на странице, если это определенный маршрут.
Поскольку я уже нахожусь в маршруте сообщения здесь, ‹Route path="/name/sagar" /›, когда я говорю /show, я на самом деле имею в виду, что он отображает /name/sagar вроде написано внутри поста маршрут.
Измените App.js: мы добавляем *
‹Route path=”/posts/*” element={‹Posts /›} /›
Posts.jsx
import {Navigate, Route, Routes, useNavigate} из «react-router-dom»;
const Posts = () =› {
//произносим фиктивный статус, поступающий с сервера
const status = 200;
константная навигация = useNavigate();
const onClick = () =› {
console.log("hello");
navigation("/about");
};
//если страница не найдена мы перенаправим на страницу 404, не найденную.
if (status === 404) {
return ‹Navigate to=”/notfound” /›;
}
return (
‹div›
‹button onClick={onClick}›click me‹/button›
‹Маршруты›
‹Route path="/name/sagar" element= {‹h1›Hello Sagar‹/h1›}/›
‹/Routes›
‹/div›
);
};
экспорт сообщений по умолчанию;
выход:
