- list of albums are shown to the user.
- User clicks on the album and sees a list of songs associated with that album.
- 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>
.