如何从下面的代码中路由我的主组件，而无需在控制台中抛出未显示的TypeError
我在显示家庭组件时遇到了麻烦。我怎么才能让这个起作用？
控制台显示未定义的TypeError:无法在./node_node/ read图标/lib/index.js处读取未定义的属性(读取'string')
我在用
my versions are:
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icon": "^1.0.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1", 我的密码是：
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);我的密码是：
Navbar.js
import React from 'react'
import './NavbarStyles.css'
import Logo from '../assets/logo.png'
import {Link} from 'react-router-dom'
import {FaBars,} from 'react-icon'
const Navbar = () => {
return (
<header>
<nav className='navbar'>
<div className='logo'>
<Link to='/'><img src={Logo} alt='' /></Link>
</div>
<ul className='nav-menu'>
<li className='nav-item'>
<Link to='/' className='nav-link'>Home</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Services</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Events</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Contact</Link>
</li>
</ul>
<div className='hamburger'>
<FaBars />
</div>
</nav>
</header>
)
}
export default Navbar;我的密码是：
App.js
import React from 'react';
import {Routes, Route} from 'react-router-dom';
import Home from './components/Home';
function App() {
return (
<>
<Routes>
<Route path='/' element={<Home />} />
</Routes>
</>
);
}
export default App;我的密码是：
Home.js
import React from 'react'
import './HomeStyles.css'
import Navbar from './Navbar'
const Home = () => {
return (
<div>
<Navbar />
</div>
)
}
export default Home;回答 2
Stack Overflow用户
发布于 2022-06-13 15:41:43
问题
我认为问题在NavBar组件中。它正在尝试从react-icon导入一个命名的导出。react-icon不导出任何特定的图标组件，而是导出一个默认导出(即import Icon from 'react-icon';)，该导出使用道具指定应该呈现哪个图标。react-icon看起来像是一个旧的/过时的包，它无法与React的更新版本(React 15.5+)一起工作。
const React = require('react')；const Icon = React.createClass({ displayName：‘图标’，propTypes：{字形: React.PropTypes.string.isRequired，// <-- )-可能在这里发布classPrefix: React.PropTypes.string，子级: React.PropTypes.node }，静态：{ defaultFontPrefix：'fa'，setDefaultFontPrefix(前缀){ Icon.defaultFontPrefix =前缀；} }，呈现(){ const前缀= this.props.classPrefix颇具Icon.defaultFontPrefix；className =
${prefix} ${prefix}-${this.props.glyph}；if (this.props.className) { className +=${this.props.className}；}返回( {this.props.children } )；}；}；module.exports =图标；
React删除了PropTypes into its own package since React 15.5，因此在上面的代码中，React.PropTypes是未定义的，并在尝试访问string属性对象时抛出一个错误。
解决方案
将FaBars图标从react-icons而不是react-icon导入。
import React from 'react';
import './NavbarStyles.css';
import Logo from '../assets/logo.png';
import { Link } from 'react-router-dom';
import { FaBars } from 'react-icons'; // <-- import from `react-icons`
const Navbar = () => {
return (
<header>
<nav className='navbar'>
<div className='logo'>
<Link to='/'><img src={Logo} alt='' /></Link>
</div>
<ul className='nav-menu'>
<li className='nav-item'>
<Link to='/' className='nav-link'>Home</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Services</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Events</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Contact</Link>
</li>
</ul>
<div className='hamburger'>
<FaBars />
</div>
</nav>
</header>
);
};您可能也希望从您的项目中删除react-icon，因为它太过时了。截至今天(13/06/2022)，回购已经7年没有更新了！通过从项目的根目录运行以下命令来卸载它。
npm uninstall --save react-iconStack Overflow用户
发布于 2022-06-12 23:17:07
import React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);试着像这样
https://stackoverflow.com/questions/72596475
复制相似问题
腾讯云开发者
