Html Question posted in
Some basic documentation can be found here.

Html – How to Link Pages in React js

So I have an App.jsx file and I am unable to link my Team.jsx page in the header of App.jsx over an Header.jsx component.

Here are the Code Files I need a to understand where I am making the mistake

/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/components/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;

I tried to Link the Team.jsx page to my App.jsx by my Header.jsx component and when I try to execute the program I can’t see anything except a blank screen I don’t know where I am making the mistake.

Tags:

2

Answers


  1. 0

    Two mistakes that I see are inconsistent capitalization in your import of Team component, and no BrowserRouter (imported as Router) wrapping your Routes.

    Replacing the code in your App.js with this should get your App.js working:

    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;
    Login or Signup to reply.
  2. 0

    Try updating your import statement in App.jsx from:

    import team from "./pages/Team";

    To:

    import Team from "./pages/Team";

    Note the capitalization of the “T” in “Team” may be creating the issue you are experiencing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search