-1

I changed the parameter in a link (Eg. localhost:3000/home/id, id is the parameter here), but now I want the whole page not to reload, only the parameter where the change has happened should reload, and the rest of the things should stay intact. Is there any way to do this in React?

I tried using optional path parameters, but on changing the link every time it got refreshed. I was not able to get any powerful resources for that.

PARENT CODE

import { AnimatePresence } from 'framer-motion';
import Manufacturing from './Manufacturing';

function App() {
    const location = useLocation();

    return (
        <AnimatePresence>
            <Routes location={location} key={location.pathname}>
                <Route path="/manufacturing/:id?" element={<Manufacturing />} />
            </Routes>
        </AnimatePresence>
    )
}

export default App

MANUFACTURING

import 3D_Model
function Manufacturing() {
    const handleClick = (id) => {
        console.log(document.getElementbyId(id));
    }

    useEffect(() =>{
        if(id != null) {
            handleClick(id);
        }
    }, [id]);

    return (
        // Load my 3D_Model
        3D_Model

        <button id="1" onClick={handleClick}> First Button </button>
        <button id="2" onClick={handleClick}> Second Button </button>
        <button id="3" onClick={handleClick}> Third Button </button>
    )
}

export default Manufacturing

Now, in this piece of code, if I change the URL from localhost:3000/manufacturing/1 to localhost:3000/manufacturing/2, I want the 3D model not to reload, and only the useEffect should get triggered. Any way to make this work?

Aayush Gupta
  • 1
  • 1
  • We can't address issues in code we can't see with reproduction steps we don't have. Can you [edit] the post to include a [mcve] and what you are doing to effect the issue you are seeing? – Drew Reese Aug 30 '23 at 19:43
  • Sorry for that, could you check the question now if it is clear? – Aayush Gupta Aug 31 '23 at 07:49
  • When the URL path changes, `Manufacturing` will be rerendered, with the new `id` path parameter in scope. Are you saying that `Manufacturing` rerendering is causing some problem/issue with 3D_Model (*whatever that is*)? How are you changing the URL? If you are manually editing the URL in the address bar, then this is certainly reloading the entire page, in other words, it remounts the entire app. – Drew Reese Aug 31 '23 at 16:27
  • It's not causing any issue, I just want to prevent reloading the 3D Model as it's heavy and takes almost a minute to load. I am changing the URL so I guess it will reload according to you – Aayush Gupta Aug 31 '23 at 23:03
  • This doesn't exactly sound like a React issue. So are you saying that if/when you navigate within the app normally and the path is changing to reflect the current id that you *don't* have the reloading issue with the model? – Drew Reese Aug 31 '23 at 23:29

0 Answers0