Error on Frontend Routes

JavaScript
1

The erors I am getting are these:

snip12
snip12857×411 20 KB

Pretty much non of my routes are working.

Figures… you create a component, import the component to App.js and give it a path, then you have a navbar with a link to that path… so… why wouldn’t it work?

App.js code

import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Navbar from "./Component/navbar.component";
import Third from "./Component/third.component";
import Fourth from "./Component/fourth.component";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/third" component={<Third />} />
          <Route path="/fourth" component={<Fourth />} />
        </Routes>
      </div>
      ;
    </BrowserRouter>
  );
}

export default App;

Navbar code:

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/" className="navbar-brand">
        Table List
      </Link>
      <div className="collapse navbar-collapse">
        <ul className="navbar-nav mr-auto">
          <li className="navbar-item">
            <Link to="/" className="nav-link">
              Items
            </Link>
          </li>
          <li className="navbar-item">
            <Link to="/third" className="nav-link">
              This is Third
            </Link>
          </li>
          <li className="navbar-item">
            <Link to="/fourth" className="nav-link">
              This is Fourth
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
}

export default Navbar;

Other component code:

import React from "react";
import { Link } from "react-router-dom";

function Third() {
  return <h1>I am the third component</h1>;
}

export default Third;
2

Been a while since I used React Router, but shouldn’t this:

<Route path="/third" component={<Third />} />

be written like this:

<Route path="/third" component={Third} />
3

Yes, I did change it… still got the same error… I also updated the $ npm install react-router-dom@6

import “./App.css”;

import React from “react”;

import { BrowserRouter, Routes, Route } from “react-router-dom”;

import Navbar from “./Component/navbar.component”;

import Third from “./Component/third.component”;

import Fourth from “./Component/fourth.component”;

function App() {

return (

<BrowserRouter>

  <div className="App">

    <Navbar />

    <Routes>

      <Route path="/third" component={Third} />

      <Route path="/fourth" component={Fourth} />

    </Routes>

  </div>

</BrowserRouter>

);

}

export default App;

4

Could it be?

Maybe because I got these other errors that I can’t get rid of them even if I run npm audit fix --focre?

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

5

It should be this way…

The REACT syntax keeps changing and not all things you find in the internet if valid with “new” updated codes…

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/third" element={<Third />} />

          <Route path="/fourth" element={<Fourth />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;```
6

But… open the question… WHERE can I find updated information?

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.