Как связать страницы в React js
Итак, у меня есть файл App.jsx, и я не могу связать свою страницу Team.jsx с заголовком App.jsx через компонент Header.jsx.
Вот файлы кода, которые мне нужны, чтобы понять, где я делаю ошибку.
/src/App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Footer from "./components/Footer";
import Header from "./components/Header";
import team from "./pages/Team";
function App() {
return (
<>
<Header />
<Routes>
<Route path='/team' element = {<Team />} />
</Routes>
<Footer/>
</>
);
}
export default App;
/src/компоненты/Header.jsx
<li>
<Link
to = "/team"
className = "block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700"
>
Team
</Link>
</li>
/src/pages/Team.jsx
function Team() {
return <h1>Our Team</h1>;
}
export default Team;
Я попытался связать страницу Team.jsx с моим App.jsx с помощью компонента Header.jsx, и когда я пытаюсь выполнить программу, я не вижу ничего, кроме пустого экрана. Я не знаю, где я делаю ошибку.
Я бы предложил использовать заглавную букву «T» для «Team» в вашем операторе импорта в App.jsx.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я вижу две ошибки: непоследовательное использование заглавных букв при импорте компонента Team и отсутствие BrowserRouter (импортированного как Router) переноса вашего Routes.
Замена кода в вашем App.js этим должна заставить ваш App.js работать:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer";
import Header from "./components/Header";
import Team from "./pages/Team";
function App() {
return (
<Router>
<Header />
<Routes>
<Route path = "/team" element = {<Team />} />
</Routes>
<Footer />
</Router>
);
}
export default App;
Большое спасибо, это то, что я искал, это решило мою проблему. Ваше здоровье
Попробуйте обновить оператор импорта в App.jsx:
import team from "./pages/Team";
К:
import Team from "./pages/Team";
Обратите внимание, что проблема, с которой вы столкнулись, может быть написана с заглавной буквы «Т» в слове «Команда».
Большое спасибо, но это была опечатка, в моем коде была буква T.
«когда я пытаюсь выполнить программу, я не вижу ничего, кроме пустого экрана» — проблема обязательно связана с одним маршрутом на другой, или проблема в том, что приложение вообще не работает?