CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Théo Rousseau
Théo Rousseau

Reputation: 19

react-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;

Upvotes: 0

Views: 1670

Answers (2)

Jacob
Jacob

Reputation: 78

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'

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202595

You have a couple minor issues:

  1. The Route component uses a path prop, not a pathname prop. With no path prop there is no matching path and Home is not rendered.

    <Route path="/" element={<Home />} />

  2. The Link is missing what it's linking to, i.e. it is missing the to prop. This causes a TypeError: Cannot read properties of undefined (reading 'pathname') error. Add the to prop link destination. Example:

    <Link to="/order">
  <button> Order Now </button>
</Link>

Edit react-router-dom-does-not-display-component

Upvotes: 0

Related Questions