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

【问题标题】：Error in ReactDOM Render when use Route from react-router-dom使用 react-router-dom 中的 Route 时 ReactDOM 渲染出错
【发布时间】：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 文件中。

标签： javascript reactjs router react-dom

【解决方案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 这能解决您的问题吗？
是的，但现在我遇到了另一个不同的错误。我正在分析它。
看看这个：stackoverflow.com/questions/55552147/… 这能解决你的错误Invariant failed: You should not use <NavLink> outside a <Router> 吗？
是的。我正在根据这个主题解决错误。
感谢您的帮助！