I was trying to create simple navbar where onclick will redirect to component but unable to redirect to the page.

Like if i click on dogs it should be redirected to home component i have given component navbar where link to dogs is available.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

Navbar.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import Home from "./Home";
import Select from "./Select";

function Navbar({ props }) {
  return (
    <div className="navbar">
      <li>
        <Link to="/">Dogs</Link>
      </li>
      <li>
        <Link to="/cats">Cats</Link>
      </li>
      <li>
        <Link to="/sheeps">Sheeps</Link>
      </li>
      <li>
        <Link to="/goats">Goats</Link>
      </li>
    </div>
  );
}

export default Navbar;

Home.js

import React from "react";

function Home() {
  return (
    <div>
      <h3>Dogs</h3>
      <div>
        <img src="./dog.png"/>
        <img src="./dog.png"/>
      </div>
    </div>
  );
}

export default Home;

App.js

import "./App.css";
import Navbar from "./Components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Components/Home";
import Select from "./Components/Select";
function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route exact path="/" component={<Home />} />
          <Route path="/cats" component={<Select />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Thank you.

CodePudding user response：

In new versions of react-router-dom you should use "element" instead of "component" like:

<Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/cats" element={<Select />} />
</Routes>