0
163
Vistasreact-router-dom does not display component
I'm trying to display my 'Home' component in my React project via react-router-dom. Thought I got your tone done right, I don't have a compile time error but the Home component just doesn't show up. Do you have an idea ?
App.js :
import Navbar from "./Components/Navbar";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import Home from "./Pages/Home";
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
<Route pathname="/" element={<Home />}> </Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Home.js :
import React from "react";
import banner from "../assets/banner.jpg";
import {Link} from 'react-router-dom';
import '../Styles/Home.css';
function Home(){
return (
<div className="home" style={{ backgroundImage: `url(${banner})` }}>
<div className="headerContainer">
<h1>Food Corner</h1>
<p>AMERICAN FOOD AT A CLICK.</p>
<Link>
<button> Order Now </button>
</Link>
</div>
</div>
);
}
export default Home;
2 Respuestas
Responde la pregunta0
If this is Router Router v6 (assuming since you are using <Routes>...</Routes>), the prop name is "path" and not "pathname"
So this:
<Route pathname="/" element={<Home />}> </Route>
Should be this:
<Route path="/" element={<Home />}> </Route>
Here are the docs for React-Router-Dom v6 (which is different than the v5 docs): Here
You should also change your react-router-dom imports. You should import BrowserRouter as Router like:
import { BrowserRouter as Router } from 'react-router-dom'
0
You have a couple minor issues:
The
Routecomponent uses apathprop, not apathnameprop. With nopathprop there is no matching path andHomeis not rendered.<Route path="/" element={<Home />} />The
Linkis missing what it's linking to, i.e. it is missing thetoprop. This causes aTypeError: Cannot read properties of undefined (reading 'pathname')error. Add thetoprop link destination. Example:<Link to="/order"> <button> Order Now </button> </Link>
