Link routes in react changes the link but nothing is changing in the content of the page

I’m trying to make a navbar using react , but although the link has changed , the content never being changed !

routes in my App.js :

import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

const App = () => (
  <Router>
    <Layout>
      <Routes>
        <Route exact path = '/' component = {Home} />
        <Route exact path = '/blog' component = {Blog} />
        <Route exact path = '/category/:id' component = {Category} />
        <Route exact path = '/blog/:id' component = {BlogDetail} />
      </Routes>
    </Layout>
  </Router>
);

export default App ;

Home.js file , the content “Home” doesn’t appear , although the link changed:

import React from "react";

const Home = () => (
    <>
    <div>
        Home
    </div> 
    </>
);

export default Home;

Also the content of Blog.js file doesn’t appear “same as Homel.js”:

import React from "react";

const Blog = () => (
    <div>
        blog
    </div>
);

code of navbar Navbar.js using bootstrap :

import React from "react";
import {Link, NavLink} from 'react-router-dom';

const Navbar = () => (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
    <div className="container-fluid">
        <Link className="navbar-brand" to="/">Around the world </Link>
        <button className="navbar-toggler"
        type="button"
        data-bs-toggle="collapse" 
        data-bs-target="#navbarNav" 
        aria-controls="navbarNav" 
        aria-expanded="false" 
        aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
            <li className="nav-item">
                <NavLink className="nav-link active" aria-current="page" exact to = '/'>home</NavLink>
            </li>
            <li className="nav-item">
                <NavLink className="nav-link" exact to = '/blog'>Blog</NavLink>
            </li>
            </ul>
        </div>
        </div>
    </nav>
    
</div>
);

export default Navbar;

Layout.js:

import React from "react";
import Navbar from '../components/Navbar';

const Layout = (props) => (
    <div>
        <Navbar />
        {props.children}
    </div>
);

export default Layout;

Answer

Nothing is rendered because you are not correctly using the Route component’s element prop to render the routed components. In react-router-dom@6 gone are the component and render and children render function props, replaced by a single element prop taking a ReactElement, a.k.a. JSX.

Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null; // <-- routed component
  index?: boolean;
  path?: string;
}

const App = () => (
  <Router>
    <Layout>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/blog' element={<Blog />} />
        <Route path='/category/:id' element={<Category />} />
        <Route path='/blog/:id' element={<BlogDetail />} />
      </Routes>
    </Layout>
  </Router>
);

Advertisement

Answer