Как я могу использовать response-router-dom для перехода к другому маршруту на моей веб-странице?
Я учусь использовать React и столкнулся с проблемой. Я был бы признателен, если бы вы могли мне помочь. В компонент я вставил ссылку и хочу, чтобы при нажатии пользователь попадал на совершенно новую страницу (на моем собственном сайте), но мне не удалось этого добиться.
Читая и просматривая видео, я увидел, что это сделано с помощью «react-router-dom». Мне удалось заставить его работать частично, но он вставляет информацию о компоненте на мою главную страницу, и мне нужна возможность посетить этот новый маршрут или компонент на новой странице моего сайта. Другими словами, я не знаю, как визуализировать связанный компонент. Спасибо!
///Компонент, в котором находится ссылка, на которую я хочу перенаправить
import React from "react";
import { Link } from "react-router-dom";
function Skills() {
return(
<div id = "bioContainer">
<h2>My Skills</h2>
<div id = "bioText">
<ul className = "skills-list">
<li className = "frontend">HTML</li>
<li className = "frontend">CSS</li>
<li className = "frontend">React</li>
<li>Javascript</li>
<li className = "backend">Node.js</li>
<li>Github</li>
<li className = "backend">PostgreSQL</li>
<li>Python</li>
</ul>
<h2>"xxx</h2>
<h3>Who am I?</h3>
<p className = "about">xxx</p>
<Link to = "/Bio">See more</Link>
</div>
</div>
);
}
export default Skills;
/// Компонент приложения
import React from "react";
import Header from "./Header";
import Skills from "./Skills";
import Projects from "./Projects";
import Footer from "./Footer";
import Get_in_touch from "./Get_in_touch";
import Bio from "./Bio";
import {Route, Routes} from "react-router-dom";
function App() {
return (
<div className = "App">
<Header />
<Skills />
<Routes>
<Route path = "/bio" element = {<Bio />} />
</Routes>
<Projects />
<Get_in_touch />
<Footer />
</div>
);
}
export default App;
Ответы 2
Если вы хотите, чтобы Skills отображался на отдельной странице от Bio, создайте для него отдельный маршрут.
Пример:
function App() {
return (
<div className = "App">
<Header />
<Routes>
<Route path = "/" element = {<Skills />} />
<Route path = "/bio" element = {<Bio />} />
</Routes>
<Projects />
<Get_in_touch />
<Footer />
</div>
);
}
Вы можете сделать то же самое для Projects и Get_in_touch, если хотите, чтобы они не отображались на каждой «странице».
@user24210059 user24210059 Вы имеете в виду «скрытие» Header, Projects, Get_in_touch и Footer при переходе к "/bio"? Вы можете визуализировать все это вместе с Skills на корневом "/" маршруте или создать компонент маршрута макета, как в этом ответе. Если бы вы могли уточнить, что вы хотите, я могу обновить свой ответ.
На ваш вопрос уже ответил Дрю Риз:
<Routes>
<Route path = "/skills" element = {<Skills />} />
<Route path = "/bio" element = {<Bio />} />
</Routes>
Я пока не могу писать комментарии, поэтому напишу это как ответ. Если вы изучаете React Router, я бы порекомендовал вам использовать их документацию. Вы изучаете старый API.
https://reactrouter.com/en/main/upgrading/v6-data
Чтобы использовать текущий макет, вам необходимо переместить все, что не является маршрутом (например, заголовок), в компонент макета. Затем вы добавляете маршрут макета в качестве родительского для каждого другого маршрута.
<Routes>
<Route element = {<Layout/>}>
<Route path = "/skills" element = {<Skills />} />
<Route path = "/bio" element = {<Bio />} />
</Route>
</Routes>
В компоненте «Макет» вы добавляете все компоненты, которые всегда должны появляться вокруг содержимого вашего маршрута, затем добавляете Outlet, который будет отображать соответствующий компонент маршрута (например, «Навыки»).
Например:
function Layout() {
return (
<div className = "App">
<Header />
<Outlet />
<Projects />
<Get_in_touch />
<Footer />
</div>
);
}
Существует вспомогательный метод для преобразования элементов Route в RouteObject, как описано здесь https://reactrouter.com/en/main/utils/create-routes-from-elements
const routes = createBrowserRouter(createRoutesFromElements(
// Omit the wrapping <Routes> component
<Route element = {<Layout/>}>
<Route path = "/skills" element = {<Skills />} />
<Route path = "/bio" element = {<Bio />} />
</Route>
)
Затем вы передаете RouteObject в RouterProvider.
<RouterProvider routes = {routes}/>
Это то, что вы бы визуализировали в своем App.tsx вместо компонента BrowserRouter, обертывающего Routes.
Привет, Дрю! Большое спасибо за помощь. Я понимаю, что в этом случае «Биография» заменяет «Навыки» на моей домашней странице (так как она у меня структурирована), но как мне скрыть другие компоненты, которые все еще видны? Они продолжают отображаться, и мне бы хотелось, чтобы при нажатии на ссылку «Посмотреть больше» отображалось только содержимое «Биографии». Еще раз спасибо за ваше время.