如何结合React.createContext()与React Router使用？组件类型无效错误

我瞅了下你的代码和报错信息，这个问题其实挺常见的，大多是组件导入或者代码结构的问题，我给你拆解下解决步骤：

1. 先检查React Router组件的导入是否正确 #

这个报错最常见的原因就是没正确导入需要的路由组件，你得确保在代码顶部加上这行：

import { HashRouter, Switch, Route } from 'react-router-dom';

要是漏了导入，或者拼写错了组件名，React就识别不出这些路由组件，自然会报"元素类型无效"的错。

2. 把代码放进合法的React组件里 #

你贴的代码片段不能直接裸写，得包裹在React组件的函数体（函数组件）或者render方法（类组件）里。比如改成标准的函数组件形式：

import React from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';

// 创建Context
const Context = React.createContext();

// 根组件
function App() {
  return (
    <Context.Provider value={{ valueTest: 1 }}>
      <HashRouter>
        <Switch>
          <Route exact path="/" render={() => <h1>HelloWorld</h1>} />
        </Switch>
      </HashRouter>
    </Context.Provider>
  );
}

export default App;

3. 版本兼容性也要注意 #

如果你用的是React Router v6，那Switch已经被Routes取代了，Route的写法也变了，要是强行用旧写法也会报错。v6的正确写法是这样的：

import { HashRouter, Routes, Route } from 'react-router-dom';

// 组件内部
<Context.Provider value={{ valueTest: 1 }}>
  <HashRouter>
    <Routes>
      {/* v6里用element代替render */}
      <Route path="/" element={<h1>HelloWorld</h1>} />
    </Routes>
  </HashRouter>
</Context.Provider>

4. 最后确认根组件的渲染 #

别忘了在入口文件（比如index.js）里正确渲染你的根组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

按照上面的步骤调整后，应该就能解决这个报错了。本质上就是确保所有用到的组件都正确导入，代码结构符合React的要求～

内容的提问来源于stack exchange，提问作者Emerson P. Ballen