React Router DOM问题：点击后URL更新但页面内容未刷新

你同时混用了react-router-dom v6的两种路由配置方案：在index.tsx中用BrowserRouter包裹App，又在routes.tsx中用createBrowserRouter定义路由结构。这两种方式不能同时使用，导致路由匹配逻辑冲突，只会更新URL但不会渲染对应页面组件。

方法一：使用RouterProvider（v6推荐方案） #

这种方式需要用RouterProvider替代BrowserRouter，直接使用你在routes.tsx中定义好的router配置：

修改src/index.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import { router } from './Routes/routes';

ReactDOM.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

这样就能让createBrowserRouter定义的路由结构生效，点击链接时页面内容会正常更新。

方法二：使用传统Routes/Route组件配置 #

如果你不想用createBrowserRouter，可以删除routes.tsx，直接在App.tsx中用Routes和Route组件配置路由：

修改src/App.tsx：

import React from "react";
import { Link, Routes, Route } from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage/HomePage";
import SearchPage from "./Pages/SearchPage/SearchPage";
import CompanyPage from "./Pages/CompanyPage/CompanyPage";

function App() {
  return (
    <>
        <Link to="/company">Go to Company Page</Link>
        <br></br>
        <Link to ="/"> App tsx</Link>
        <br></br>
        <Link to="/search"> Search Page</Link>
        
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/search" element={<SearchPage />} />
          <Route path="/company" element={<CompanyPage />} />
        </Routes>
    </>
  );
}

export default App;

同时保持src/index.tsx的BrowserRouter包裹逻辑即可：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

两种方法任选其一，都能解决URL更新但页面内容不变化的问题。

内容的提问来源于stack exchange，提问作者Saul