React components do not render when Route path is enabled

Question

My react app looks beautiful. I want to use the sidebar component to change the inner "dashboard" page for a "solar" page when clicking on an icon. Everything renders allright, however, when I apply paths from the react-router-dom library it stops rendering all components all together and just my -root image shows visually, It took me a lot of time to do scrollreveal animations and I am wondering if having that has something to do with it? I am pretty new at react and trying to learn fast. Hopefully one of your guys can help me out. I have left the options I have used and left it all in comments.

App.js

import React, { useEffect } from "react";
import Sidebar from "components/Sidebar";
import RightSidebar from "components/RightSidebar";
import Dashboard from "pages/Dashboard";
import Solar from "pages/Solar";

import styled from "styled-components";
import scrollreveal from "scrollreveal";
import { BrowserRouter as Router, Route } from "react-router-dom";

export default function App() {
  
  useEffect(() => {
    const sr = scrollreveal({
      origin: "left",
      distance: "80px",
      duration: 1000,
      reset: false,
    });
    sr.reveal(
      `
       #sidebar
    `,
      {
        opacity: 0,
      }
    );
    const sr2 = scrollreveal({
      origin: "right",
      distance: "80px",
      duration: 1000,
      reset: false,
    });
    sr2.reveal(
      `
       #rightSidebar
    `,
      {
        opacity: 0,
      }
    );
  }, []);
  return (
      <Div>
      <Router>
        <div className="flex">
        <Sidebar />
        </div>
          <div className="content">
            <Dashboard />
            {/*<Dashboard /> */}

            {/*<Route path="/" component={Dashboard} />*/}
            {/*<Route path="/" component={Dashboard} />*/}

             {/*<Solar /> */}
            {/*<Route path="/solar" component={Solar} />*/}

          </div>
        <RightSidebar />
      </Router>
      </Div>
   
  );
}


const Div = styled.div`
  display: grid;
  grid-template-columns: 1fr 12fr 4fr;
  min-height: 100vh;
  height: max-content;
  @media screen and (min-width: 280px) and (max-width: 1080px) {
    grid-template-columns: 1fr;
    height: max-content;
  }
`;

Sidebar.jsx

    import React from "react";
import styled from "styled-components";
import logo from '../assets/drexwhite.png';
import { FaSolarPanel } from "react-icons/fa";
import { BiGroup, BiBell } from "react-icons/bi";
import { AiOutlineDollarCircle } from "react-icons/ai";
import { AiFillThunderbolt } from "react-icons/ai";
import { Link } from "react-router-dom";
import { FiHelpCircle } from "react-icons/fi";


function Sidebar() {
  
  return (
    <Aside id="sidebar">
      <div className="brand">
      <img src={logo} width="100" height="50" alt="logo"/>
      </div>
      <ul className="links">
        <li className="selected">
          <AiFillThunderbolt />
          <Link to="/"> </Link>

        </li>
        <li>
          <FaSolarPanel  />
          <Link to="solar"> </Link>
          

        
        </li>
        <li>
          <AiOutlineDollarCircle />
          <Link to=""> </Link>


        </li>
        <li>
          <BiBell/>
          <Link to=""> </Link>


        </li>
        <li>
          <BiGroup />
          <Link to=""> </Link>



        </li>
      </ul>
      <div className="help">
        <FiHelpCircle />
        <Link to=""> </Link>


      </div>
    </Aside>
  );
}

const Aside = styled.aside`
  background-color: var(--dark-background-color);
  height: 100%;
  width: max-content;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .help {
    svg {
      transition: 0.5s ease-in-out;
      cursor: pointer;
      color: white;
    }
    &:hover {
      svg {
        color: var(--primary-color);
      }
    }
  }
  svg {
    color: var(--primary-color);
    font-size: 1.5rem;
  }
  .brand {
    svg {
      font-size: 2.5rem;
    }
  }
  .links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style-type: none;
    li {
      border-radius: 1rem;
      padding: 0.5rem;
      transition: 0.5s ease-in-out;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        color: white;
      }
      &:hover {
        box-shadow: 0 0 60px 8px var(--primary-color);
        svg {
          color: var(--primary-color);
        }
      }
    }
    .selected {
      box-shadow: 0 0 60px 8px var(--primary-color);
      svg {
        color: var(--primary-color);
        background-color: transparent;
      }
    }
  }
  @media screen and (min-width: 280px) and (max-width: 1080px) {
    width: 100%;
    padding: 1rem;
    .links,
    .help {
      display: none;
    }
  }
`;

export default Sidebar;

Answer 1

You are missing the Routes component. Route components needs to be wrapped in the Routes component: https://reactrouter.com/en/main/components/routes.

And you should use pass the component to render to the element prop of Route.

Like this:

import React, { useEffect } from "react";

import styled from "styled-components";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

export const Sidebar = () => {
  return <div>sidebar</div>;
};

export const Dashboard = () => {
  return <div>dashboard</div>;
};

export default function App() {
  return (
    <div>
      <Router>
        <div className="flex">
          <Sidebar />
        </div>
        <div className="content">
          <Routes>
            {/* <Route path="/" element={<Dashboard />} /> */}
            <Route path="/" element={<Dashboard />} />

            {/*<Solar /> */}
            {/*<Route path="/solar" element={<Solar />} />*/}
          </Routes>
        </div>
      </Router>
    </div>
  );
}

const Div = styled.div`
  display: grid;
  grid-template-columns: 1fr 12fr 4fr;
  min-height: 100vh;
  height: max-content;
  @media screen and (min-width: 280px) and (max-width: 1080px) {
    grid-template-columns: 1fr;
    height: max-content;
  }
`;

Codesandbox here: https://codesandbox.io/s/cranky-dawn-jhz2ew