如何在React-router中添加状态

import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

function UserProfile() {
  let { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
        </ul>
      </nav>

      <Route path="/user/:userId" component={UserProfile} />
    </Router>
  );
}

import { BrowserRouter as Router, Route, Link, useLocation, useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();
  function handleClick() {
    history.push('/about', { message: 'Hello from Home' });
  }
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

function About() {
  const location = useLocation();
  return <div>{location.state?.message}</div>;
}

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

import React, { createContext, useContext } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const MyContext = createContext();

function MyProvider({ children }) {
  const [state, setState] = React.useState('initial state');
  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
}

function Home() {
  const { state, setState } = useContext(MyContext);
  return (
    <div>
      <h2>Home</h2>
      <p>{state}</p>
      <button onClick={() => setState('new state')}>Change State</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <Router>
        <Route path="/" exact component={Home} />
      </Router>
    </MyProvider>
  );
}

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const initialState = { message: 'Hello World' };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

function Home() {
  const message = useSelector(state => state.message);
  const dispatch = useDispatch();
  return (
    <div>
      <h2>Home</h2>
      <p>{message}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_MESSAGE', payload: 'New Message' })}>Change Message</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Route path="/" exact component={Home} />
      </Router>
    </Provider>
  );
}