Why Nested Routing is not working in ReactJs?I am using react-router version 5.2

Viewed 76
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.

0 Answers
Related