I am really stuck at this as I am not getting any possible solution for this. I want to navigate to Profile section when '/profile' is in the url on click on the sidebar options but I am not able to work with in the sidebaroptions as they are created by passsing props in Sidebarjs.
Any possible solution on how to deal with the routing when the links are created dnyamically thourgh components.
Sidebar.js
import React from 'react';
import { Link } from "react-router-dom";
import './Sidebar.css';
import SidebarOption from './SidebarOption';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import FolderSpecialIcon from '@material-ui/icons/FolderSpecial';
import BusinessIcon from '@material-ui/icons/Business';
function Sidebar() {
return (
<div className="sidebar">
<SidebarOption title="Projects" Icon={FolderSpecialIcon}/>
<SidebarOption title="Experience" Icon={BusinessIcon}/>
<SidebarOption title="Profile" Icon={AccountCircleIcon}/>
</div>
)
}
export default Sidebar;
SidebarOptions.js
import React from 'react';
import './SidebarOption.css';
import { Link, BrowserRouter } from 'react-router-dom';
function SidebarOption({title, Icon}) {
return (
<div className="sidebarOption">
{Icon && <Icon fontSize="large" className="sidebarOption__Icon" />}
{Icon && Icon ? <h4>{title}</h4> : <p>{title}</p>}
</div>
)
}
export default SidebarOption
Body.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './Body.css';
import Profile from "./Profile";
import Projects from "./Projects";
function Body() {
return (
<Router>
<div className="body">
<Switch>
<Route exact path="/" component={Profile}>
</Route>
<Route path="/projects" component={Projects}>
</Route>
<Route path="/experience">
<h5>This is Experience.</h5>
</Route>
</Switch>
</div>
</Router>
)
}
export default Body;
App.js
import React from 'react';
import './App.css';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import Body from './Body';
function App() {
return (
<div className="app">
<Sidebar />
<Body />
</div>
);
}
export default App;
Sidebar
needs to be rendered within aRouter
, any usages outside and error messages likely would have informed you of this requirement. – Drew Reese Aug 24 '20 at 19:12