使用 react-router-dom 中的 Route 时 ReactDOM 渲染出错

Posted 2023-02-22

【中文标题】使用 react-router-dom 中的 Route 时 ReactDOM 渲染出错

【英文标题】：Error in ReactDOM Render when use Route from react-router-dom

【发布时间】：2021-10-14 05:52:44

【问题描述】：

当我尝试使用来自“react-router-dom”的路由时，屏幕上出现此错误。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的 thenfile 导出组件，或者您可能混淆了默认导入和命名导入。

查看Router.Consumer的渲染方法。

  3 | import App from './App';
  4 | import * as serviceWorker from './serviceWorker';
  5 | 
> 6 | ReactDOM.render(
  7 |   <React.StrictMode>
  8 |     <App />
  9 |   </React.StrictMode>,

我的 index.js 代码是

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

而我的 App.js 是

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import FooterTR from './components/Footer';
import  BrowserRouter as Router, Switch, Route  from 'react-router-dom';
import Home from './pages';
import About from './pages/about';    
import Blog from './pages/blog';
import ContactUs from './pages/contactUs';
import SignUp from './pages/signUp';

function App() 
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component=Home />
        <Route path='/about' component=About />
        <Route path='/blog' component=Blog />
        <Route path='/contact-us' component=ContactUs />
        <Route path='/sign-up' component=SignUp />
      </Switch>

      <FooterTR />
    </Router>
  );


export default App;

【问题讨论】：

你确定是因为Route 吗？这可能是由于您在每个 Route 中呈现的组件之一。确保您已将 Home、About、Blog、ContactUs 和 SignUp 导出为各自文件的默认导出。

嘿！我设法修复它，问题出在 app.js 文件中。

【参考方案1】：

您的组件（Navbar, FooterTR, Home, About, Blog, ContactUs, SignUp）导入语句可能存在问题。但如果所有这些都完美的话， 试着像这样写你的App.js：

import React from 'react';
import  BrowserRouter as Router, Switch, Route  from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import FooterTR from './components/Footer';
import Home from './pages';
import About from './pages/about';    
import Blog from './pages/blog';
import ContactUs from './pages/contactUs';
import SignUp from './pages/signUp';

function App() 
  return (
   <>
   <Navbar />
    <Router>
      <Switch>
        <Route path='/' exact component=Home />
        <Route path='/about' component=About />
        <Route path='/blog' component=Blog />
        <Route path='/contact-us' component=ContactUs />
        <Route path='/sign-up' component=SignUp />
      </Switch>
    </Router>
    <FooterTR />
    </>
  );


export default App;

【讨论】：

@Stéphani Pinheiro Ferreira 这能解决您的问题吗？

是的，但现在我遇到了另一个不同的错误。我正在分析它。

看看这个：***.com/questions/55552147/… 这能解决你的错误Invariant failed: You should not use <NavLink> outside a <Router> 吗？

是的。我正在根据这个主题解决错误。

感谢您的帮助！