使用 React Router 时更新文档和应用栏标题

Question

我正在研究在 TypeScript 应用程序中使用 react 路由器。 如何在 SPA 中更新文档标题 (document.title) 和应用栏标题 (<span className="appbartitle">Home</span>) 以响应路由器导航？

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
        <Router>
            <div className="appbar">
                <span className="appbartitle">Home</span>
                <span className="menuItem"><Link to="/">Home</Link></span>
                <span className="menuItem"><Link to="/about">About</Link></span>
                <span className="menuItem"><Link to="/dashboard">Dashboard</Link></span>
            </div>
            <Switch>
                <Route exact path="/"><Home /></Route>
                <Route path="/about"><About /></Route>
                <Route path="/dashboard"><Dashboard /></Route>
            </Switch>
        </Router>
    </div>
    );
}

export default App;

const Home = () => <div><h2>Home page</h2></div>;
const About = () => <div><h2>About page</h2></div>;
const Dashboard = () => <div><h2>Dashboard page</h2></div>;

Answer 1

好吧，您可以在组件内部执行副作用。例如

import React, {useEffect} from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import './App.css';
...
...
...
const Home = () => {
  useEffect(() => {
    // Update the document title using the browser API
    document.title = "[Your Title]";
    document.querySelector('.appbartitle').textContent = "[Your App Bar Title]"
  });

  return (<div><h2>Home page</h2></div>);
}