React JS routing nothing is displaying

Question

Im new at routing on react.JS, however I have been struggling because the simple products.jsx should return a simple message when I click, but no one is displaying.

Index.JS code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';

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

code at App.JS

import React, { Component } from "react";
import NavBar from "./components/navbar";
import { Route, Routes } from 'react-router-dom';
import Products from "./components/products";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <Routes>
          <Route path= "/products" component={Products}></Route>
        </Routes>
      </div>
    );
  }
}

export default App;

nav.jsx

import React from "react";

const NavBar = () => {
  return (
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/products">Products</a>
      </li>
      <li>
        <a href="/posts/2018/06">Posts</a>
      </li>
      <li>
        <a href="/admin">Admin</a>
      </li>
    </ul>
  );
};

export default NavBar;

products.jsx code

const Product = () => {
  return <h1>Products</h1>;
};

export default Product;

I dont know basically what i'm missing.

Hi, Just change ` <Route path="products" element={<Products/>} />` and you are good to go. — Aniruddh Thakor
– Aniruddh Thakor, Commented Nov 30, 2021 at 6:21

Drew Reese · Accepted Answer · 2021-11-30 06:15:07Z

2

In react-router-dom v6 the Route components render their components on the element prop as JSX.

<Route path="/products" element={<Products />} />

If you are still using v5 and have just mixed up documentation, then in v5 use the Switch instead (Routes replaced Switch in v6) and use the component prop as you were.

<Switch>
  <Route path="/products" component={Products} />
</Switch>

answered Nov 30, 2021 at 6:15

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vahid ghadiri · Accepted Answer · 2021-11-30 06:17:03Z

1

If you are using react-router-dom 6, you have to use element instead of component inside of each route like this:

        <Routes>
          <Route path= "/products" element={<Products/>}></Route>
        </Routes>

if you are using react-router-dom 5, you have to use Switch instead of Routes, like this:

        <Switch>
          <Route path= "/products" component={Products}></Route>
        </Switch>

answered Nov 30, 2021 at 6:17

vahid ghadiri

3451 silver badge8 bronze badges

Collectives™ on Stack Overflow

React JS routing nothing is displaying

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related