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.
>Solution :
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>