React Router nicht Rendering-Komponente, sagt Return-Anweisung fehlt

Question

Im Geting ein Fehler wie folgt: Uncaught Fehler: Route (...): Nichts wurde von Rendern zurückgegeben. Dies bedeutet normalerweise, dass eine Rückgabeanweisung fehlt.

import React from 'react'; 
import {BrowserRouter, Switch, Route, ReactDom} from 'react-router-dom' 
import ProductsDisplay from './ProductsDisplay' 
import Home from './Home' 
import Contact from './Contact' 

const Main =() => { 
    return (
    <main> 

      <Switch> 
       <Route exact path="/" component={Home}/> 
       <Route exact path="/contact" component={Contact}/> 
       <Route exact path="/monitors" render={() => {<ProductsDisplay productCategory="monitors"/>}}/> 
       <Route exact path="/computers" render={() => {<ProductsDisplay productCategory="computers"/>}}/> 
      </Switch> 

    </main> 
    ); 
} 

export default Main; 

Ich bin sicher, die return-Anweisung in allen Komponenten ist, was alle Ideen kann das sein?

Answer 1

Sie geben nichts von der Methode zurück, die an die Renderreproduktion übergeben wurde. Versuchen Sie {} Klammern wie diese

<Route exact path="/monitors" render={() => <ProductsDisplay productCategory="monitors"/>}/> 
<Route exact path="/computers" render={() => <ProductsDisplay productCategory="computers"/>}/> 

entfernen oder schreiben return in dieser Methode wie folgt

<Route exact path="/monitors" render={() => {return <ProductsDisplay productCategory="monitors"/>}}/> 
<Route exact path="/computers" render={() => {return <ProductsDisplay productCategory="computers"/>}}/> 

Answer 2

Return-Anweisung wird in monitors und computers Route fehlt, machen property.You React Component oder React element zurückkommen müssen.

<Switch> 
<Route exact path="/" component={Home}/> 
<Route exact path="/contact" component={Contact}/> 
<Route exact path="/monitors" render={() => {return <ProductsDisplay productCategory="monitors"/>}}/> 
<Route exact path="/computers" render={() => {return <ProductsDisplay productCategory="computers"/>}}/> 
</Switch> 

oder mit ECMA6 Standardrückgabe Syntax

<Switch> 
<Route exact path="/" component={Home}/> 
<Route exact path="/contact" component={Contact}/> 
<Route exact path="/monitors" render={() => (<ProductsDisplay productCategory="monitors"/>)}/> 
<Route exact path="/computers" render={() => (<ProductsDisplay productCategory="computers"/>)}/> 
</Switch>