使用withRouter传参报错：Invariant Violation: 不可在<Router>外使用<Route>或withRouter()

嘿，这个问题我之前帮好几个开发者捋过，其实原因特别明确，咱们一步步来解决它～

一、先说说错误为啥会出现 #

你看到的这个错误，本质就是你的Description组件没被包裹在<Router>组件的范围内。withRouter是靠Router提供的上下文来工作的，要是组件不在Router的子树里，它根本找不到需要的路由信息，自然就报错了。

修复方法超简单 #

找到你的应用入口文件（一般是index.js或者App.js），确保所有用到withRouter或者<Route>的组件，都被<BrowserRouter>（或者HashRouter，看你用的是哪种路由模式）包起来就行。

给你举个入口文件的正确例子：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // 别忘了导入Router组件
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter> {/* 所有路由相关组件都得在这个里面！ */}
    <App />
  </BrowserRouter>
);

另外也检查下Description的渲染层级，别让它直接在Router外面被渲染。比如如果是在某个路由页面里引入它，只要父组件在Router范围内就没问题。

二、不想用withRouter？这些传参方案也好用 #

要是你不想依赖withRouter，还有几种常用的传参方式，按需选就行：

1. 用React Router v6的钩子（函数组件首选） #

如果你的Description能改成函数组件，React Router v6推荐用钩子替代withRouter，更简洁：

• 拿URL参数用useParams
• 跳转路由用useNavigate

示例代码给你参考：

import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import dummy_database from '../../file_source/dummy_database.json';
import './css/description.css';

const Description = () => {
  const params = useParams(); // 比如URL是/description/:id，这里就能拿到params.id
  const navigate = useNavigate(); // 要跳转的话直接调用navigate('/home')就行

  // 你的业务逻辑写这里...
  return (
    // 组件内容
  );
};

export default Description;

2. 直接通过props手动传参 #

如果是父组件跳转或者渲染Description时，直接把需要的参数通过props传过去就行，简单粗暴：
比如父组件里这么写：

import Description from './Description';
import { useNavigate } from 'react-router-dom';

const ParentComponent = () => {
  const navigate = useNavigate();
  // 直接把参数和跳转方法传给Description
  return (
    <Description 
      itemId="123" 
      goBack={() => navigate(-1)} 
    />
  );
};

然后Description组件直接从props里拿：

class Description extends Component {
  render() {
    const { itemId, goBack } = this.props;
    // 用这些参数干活就行
    return (
      <button onClick={goBack}>返回</button>
      // 其他组件内容
    );
  }
}

export default Description;

3. 用React Context封装路由能力 #

要是你的项目里好多组件都需要路由相关的能力，不如把路由钩子封装成一个Context，这样不用每个组件都单独导入钩子：
先创建一个Context文件：

import { createContext, useContext } from 'react';
import { useNavigate, useParams, useLocation } from 'react-router-dom';

const RouterContext = createContext();

export const RouterProvider = ({ children }) => {
  const navigate = useNavigate();
  const params = useParams();
  const location = useLocation();

  return (
    <RouterContext.Provider value={{ navigate, params, location }}>
      {children}
    </RouterContext.Provider>
  );
};

// 自定义钩子，方便组件使用
export const useRouter = () => useContext(RouterContext);

然后在入口文件里，把RouterProvider放在BrowserRouter里面：

root.render(
  <BrowserRouter>
    <RouterProvider>
      <App />
    </RouterProvider>
  </BrowserRouter>
);

之后Description组件就能用自定义的useRouter钩子拿路由信息了：

import { useRouter } from './RouterContext';

const Description = () => {
  const { navigate, params } = useRouter();
  // 该咋用咋用
};

三、小提醒 #

要是你还在使用React Router v5及更早的版本，withRouter的用法本身没问题，但还是得确保组件在Router内。另外v5里跳转用的是useHistory钩子，不是v6的useNavigate，别搞混了哦～

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