[Solved]-How to render dynamic component in the same page based button click from different section of same page?-Reactjs

AS I understood you want to implement a project details based on the project name.

For this kind of implementation , you can use TABS(https://material-ui.com/components/tabs/) rather than routes . To align vertical , you can use vertical section in tabs component. Route should be used , when you want to redirect to some other page .

Sidebar sample application in reactjs using react-router-dom

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./styles.css";
import Header from "./Header";
const Home = () => (
  <div className="rightside">
    <h1>Home Page</h1>
  </div>
);
const About = () => (
  <div className="rightside">
    <h1>About Page</h1>
  </div>
);
const Product = () => (
  <div className="rightside">
    <h1>Product Page</h1>
  </div>
);
const Contact = () => (
  <div className="rightside">
    <h1>Contact Page</h1>
  </div>
);
const headerStyle = {
  padding: 10,
  background: "darkcyan"
};
ReactDOM.render(
  <Router>
    <header style={headerStyle}>Header</header>
    <div className="main">
      <Header />
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/product" component={Product} />
        <Route path="/contact" component={Contact} />
        <Route path="/" component={Home} />
      </Switch>
    </div>
  </Router>,
  document.getElementById("root")
);

Header.js

import React from "react";
import { NavLink } from "react-router-dom";
import "./styles.css";
export default function Header() {
  return (
    <div className="leftside">
      <ul>
        <li><NavLink to="/home">Home</NavLink></li>
        <li><NavLink to="/about">About</NavLink></li>
        <li><NavLink to="/product">Product</NavLink></li>
        <li><NavLink to="/contact">Contact</NavLink></li>
      </ul>
    </div>
  );
}

styles.css

body {
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
  height: 100vh;
}
.leftside {
  background: darkgrey;
}
.rightside {
}
.leftside ul {
  list-style-type: none;
  padding: 0;
}
.leftside ul li a {
  color: white;
  text-decoration: none;
}
.leftside ul li {
  padding: 5px 10px;
  background: black;
  margin: 1px 0px;
}
.leftside ul li:hover {
  background: darkcyan;
  color: white;
}