Итак, у меня есть файл 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, и когда я пытаюсь выполнить программу, я не вижу ничего, кроме пустого экрана. Я не знаю, где я делаю ошибку.
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания видеоигр, как 2D, так и 3D, с использованием библиотеки Three.js.
Я вижу две ошибки: непоследовательное использование заглавных букв при импорте компонента 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;