使用来自 react-router-dom 的 Route 时 ReactDOM Render 出错

Question

当我尝试使用来自 'react-router-dom' 的路由时，我在屏幕上看到了这个错误。

错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：对象。您可能忘记了从定义它的 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;

Answer 1

您的 components(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;

使用来自 react-router-dom 的 Route 时 ReactDOM Render 出错

Error in ReactDOM Render when use Route from react-router-dom

javascript

router

reactjs

react-dom