Question

0

162

Visualizações

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;

about 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-08T03:19:31.702Z

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'

Answer 2 · 2022-07-08T03:19:31.712Z

You have a couple minor issues:

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 />} />
```
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>
```

0

162

react-router-dom does not display component

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT