1. list of albums are shown to the user.
2. User clicks on the album and sees a list of songs associated with that album.
3. User plays song and song is played but as soon as I go to another page song gets paused.

What I want to do After the 3rd step is I want the bottom music navbar to show the song name and playing status - play/pause.

Also when I play the song and move to another component the song gets paused so to keep playing song when i change the page.

CodePudding user response：

Try using component in app.js just like header, and keep music details inside that component which will not then rendered every time you change the component, I know not the perfect answer but may help.

// I am suggesting something like this.

<Router>
      your list of paths here...

     <BottomNavForPlayer />
</Router>

CodePudding user response：

You can define your music component in your root level (or so called as a parent component) and set all other path(routing) in the child components. So While browsing to another page it only render the child components, so your parent component remains same.

Here is the sample starter code that you're looking for:

// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from "./layout"

ReactDOM.render(
  <Layout />,
  document.getElementById('root')
);

// layout.jsx
import { useEffect } from "react"
import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";
import Page1 from "./page1";
import Page2 from "./page2";

const Layout = () => {
    return (
        <>
            <Music />
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Page1 />} />
                    <Route path="page2" element={<Page2 />} />
                </Routes>
            </BrowserRouter>
        </>
    )
}

const Music = () => {
    useEffect(() => {
        console.log("Log if it rerender")
    })
    return (
        <h1>Hi I'm music</h1>
    )
}

export default Layout

Here you can see there is a music component which is places outside of BrowseRouter component. So That music Component will not re-render on change of route.

// page1.jsx
import { Link } from "react-router-dom";

export default function Page1() {
    return (
        <main style={{ padding: "1rem 0" }}>
            <Link to="/">Page1</Link> |{" "}
            <Link to="/page2">Page2</Link>
            <h2>Page 1</h2>
        </main>
    );
}

// page2.jsx
import { Link } from "react-router-dom";

export default function page2() {
    return (
        <main style={{ padding: "1rem 0" }}>
            <Link to="/">page1</Link> |{" "}
            <Link to="/page2">Page2</Link>
            <h2>Page 2</h2>
        </main >
    );
}

This will be helpful for you. You can comment it out if you have something to discuss.

CodePudding user response：

Move music player component outside the <Routes><Routes>.