import React from "react";
import "./App.css";
import Main from "./Components/ListenToMusic/Main";
import Home from "./Components/Home/Home";
import { Provider } from "react-redux";
import store from "./Components/Redux/store";
import { Route } from "react-router-dom";
function App() {
return (
<Provider store={store}>
<div className="App">
<Route exact path="/" component={Home} />
<Route exact path="/listen" component={Main} />
</div>
</Provider>
);
}
export default App;
Above Code is my App.js file in which I created a route for the Main component and in that Main Component, I created nested Route. I am using react-router version 5.2.0 I am stuck in this for almost 8 hours kindly help me in fixing this issue.
import React from "react";
import "../CssFiles/main.scss";
import Nav from "./Nav";
import {
Switch,
Route,
Link,
useParams,
useRouteMatch,
} from "react-router-dom";
import Primary from "./Primary";
import Search from "./Search";
import Library from "./Library";
import NotFound from "./NotFound";
import MusicControls from "./MusicControls";
const Main = (props) => {
let { path, url } = useRouteMatch();
return (
<div className="outerWrap">
<div className="main">
<Nav path={path} />
<Switch>
<Route path={`${path}/primary`} component={Primary} />
<Route path={`${path}/search`} component={Search} />
<Route path={`${path}/library`} component={Library} />
<Route component={NotFound} />
</Switch>
</div>
<div className="musicControls">
<MusicControls />
{/* <h1>Music Controls</h1> */}
</div>
</div>
);
};
export default Main;
This is where I am doing nested routing when I search the particular nested route it shows me blank page.