How to change the title on every page with a reusable navbar in React?-CodePudding

I am working on a React app with a reusable navbar. I want the App name (in the navbar) to change, every time I go to a new page.

I tried to get the pathname with window.location.pathname and then I want to set a different title per pathname with a useState that I pass down to the navbar.

But it doesn't work yet. I get the error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Can someone help me out?

in App.js

  const [titleApp, setTitleApp] = useState("Home");

  switch (window.location.pathname) {
    case "/":
      setTitleApp("Home");
      break;
    case "/worklist":
      setTitleApp("Worklist");
      break;
    case "/analytics":
      setTitleApp("analytics");
      break;
    default:
      setTitleApp("Home");
      break;
  }

  return (
    <div className="GlobalDiv">
      <Router>
 
          <NavBar
            title={titleApp}
          />
          <div className="MainDiv">
            <Switch>
              <Route exact path="/" component={Springboard} />
              <Route exact path="/worklist" component={Worklist} />
              <Route path="/analytics" component={AnalyticsDashboard} />
            </Switch>
          </div>
      </Router>
    </div>
  );
}

export default App; ```

CodePudding user response：

Could you see if this works,

useEffect(() => {
   switch (window.location.pathname) {
    case "/":
      setTitleApp("Home");
      break;
    case "/worklist":
      setTitleApp("Worklist");
      break;
    case "/analytics":
      setTitleApp("analytics");
      break;
    default:
      setTitleApp("Home");
      break;
  }
}, [window.location.pathname]);

CodePudding user response：

you can make it work with history listener

https://reactrouter.com/web/api/Hooks/uselocation

import { useLocation } from 'react-router-dom';
        
        const location = useLocation()
        
          React.useEffect(() => {
            switch (location.pathname) {
            case "/":
              setTitleApp("Home");
              break;
            case "/worklist":
              setTitleApp("Worklist");
              break;
            case "/analytics":
              setTitleApp("analytics");
              break;
            default:
              setTitleApp("Home");
              break;
          }
          }, [location, setTitleApp])

import { useHistory } from 'react-router-dom'

const { listen } = useHistory()

  React.useEffect(() => {
    const unlisten = listen((location) => {
          switch (location.pathname) {
    case "/":
      setTitleApp("Home");
      break;
    case "/worklist":
      setTitleApp("Worklist");
      break;
    case "/analytics":
      setTitleApp("analytics");
      break;
    default:
      setTitleApp("Home");
      break;
  }
    })

    return unlisten
  }, [listen, setTitleApp])