要将状态与React Router链接起来，可以使用React Router提供的useLocation和useHistory钩子来获取当前的位置和导航历史记录，并使用状态管理库（如Redux或Context API）来存储和更新状态。

下面是一个示例，展示如何将状态与React Router链接起来：

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

// 状态管理
const AppStateContext = React.createContext();

const AppStateProvider = ({ children }) => {
  const [state, setState] = useState({});

  return (
    
      {children}
    
  );
};

// 路由组件
const Home = () => {
  const { state, setState } = React.useContext(AppStateContext);

  const handleClick = () => {
    setState({ ...state, activeRoute: '/' });
  };

  return (
    

      
Home
      Update State
    
  );
};

const About = () => {
  const { state, setState } = React.useContext(AppStateContext);

  const handleClick = () => {
    setState({ ...state, activeRoute: '/about' });
  };

  return (
    

      
About
      Update State
    
  );
};

const App = () => {
  const { state } = React.useContext(AppStateContext);
  const location = useLocation();
  const history = useHistory();

  React.useEffect(() => {
    // 当路由变化时，更新状态
    if (state.activeRoute !== location.pathname) {
      history.push(state.activeRoute);
    }
  }, [state.activeRoute, location.pathname, history]);

  return (
    
      

      
      
    
  );
};

const Root = () => (
  
    
  
);

export default Root;

在上面的代码中，我们使用AppStateContext来存储和更新状态，并使用useLocation和useHistory钩子来获取当前的位置和导航历史记录。

在Home和About组件中，我们通过在点击按钮时更新状态来模拟状态的改变。

在App组件中，我们使用useEffect钩子来监听状态的改变，并在路由变化时更新状态。

最后，在Root组件中，我们将整个应用包裹在AppStateProvider中，以便在整个应用中共享状态。

这样，当状态改变时，React Router会根据状态的值自动更新路由，并且当路由变化时，状态会自动更新为对应的值。