electron 使用Eletron的React路由器：需要字符串(对于内置组件)或类/函数(对于复合组件)，但得到：未定义的

nuypyhwy 于 2023-08-01 发布在 Electron

关注(0)|答案(1)|浏览(106)

我试图使用带有Electron的React Router来导航到另一个页面，点击并添加幻灯片过渡动画，但它给出了这个错误：
type是无效的--需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但是得到了：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查m的渲染方法。
我想错误可能在这里：
Home.js

import { HashRouter, Route, Routes, Link, Switch } from "react-router-dom";
import Search from './Search';

<HashRouter>
  <div>
    <div>
      <Link to="/search"><h2>test</h2></Link>
    </div>
    <Switch>
      <Route exact path='/search' component={Search} />
    </Switch>
  </div>
</HashRouter>

字符串
或
Seach.js

import React from 'react';
import "./Search.css";
import { Weather } from "./weather";

const Search = () => {
  return (
    <div>
      <p>test</p>
    </div>
  )
}

export default Search;

型
下面是整个代码：https://github.com/vitorhugo1207/Weatherco
如果我说了什么重要的话请告诉我。

electron

来源：https://stackoverflow.com/questions/76763626/react-router-with-eletron-expected-a-string-for-built-in-components-or-a-clas

1条答案

按热度按时间

qxsslcnc1#

对我来说，解决方案是switch到Routes和component到element，但它产生了一个新的问题：React只是将Search中的元素添加到Search中，然后我更改了程序的结构：
index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { HashRouter } from 'react-router-dom';

import App from './App';

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

字符串
App.js

import * as React from 'react';
import { Routes, Route } from 'react-router-dom';

import Home from './Home.js';
import Search from './Search.js';

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="search" element={<Search />} />
      </Routes>
    </div>
  );
}

型
Home.js

import React, {useState, useEffect} from 'react';
import './Home.css';
import {Weather} from './weather';
import { Link } from "react-router-dom";

function Home() {
  //Some Codes...

  return (
    <div className='main'>
        <div className='head'>
            <Link to={"/search"}>Search</Link>
            <br/>
            <Link to={"/"}>Home</Link>

            {/*Some Codes...*/}
        </div>
        {/*Some Codes...*/}
    </div>
  )
}

export default Home;

型
然后，在App中设置<Routes>后，我将孔App.js包含在<HashRouter>中，并在想要设置链接时调用<Link>。
如果你想看完整的代码：https://github.com/vitorhugo1207/Weatherco/tree/f4fde838a58ac6fa34902cb198691dcdab318555
这是一个很简单的问题，也许是我的不注意让它变得更难，但我希望这能帮助一些有类似问题的人。
Package ：

copy-webpack-plugin@11.0.0
craco@0.0.3
电子 Package 机@17.1.1
电子@25.3.1
react-dom@18.2.0
react-router-dom@6.14.2
react-scripts@5.0.1
react@18.2.0
webpack-dev-middleware@6.1.1
webpack-node-externals@3.0.0

赞(0）回复(0）举报 2023-08-01

我来回答

electron 使用Eletron的React路由器：需要字符串(对于内置组件)或类/函数(对于复合组件)，但得到：未定义的

1条答案

相关问题

热门标签

最新问答