リターンルータはレンダリングコンポーネントではなく、返信文がありません。

Question

Imこのようなエラーが表示されます。未知のエラー：ルート（...）：何もレンダリングから返されませんでした。これは通常、return文がないことを意味します。

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; 

私はreturn文は、すべてのコンポーネントである確信して、任意のアイデアは、これができますか？

Answer 1

render propに渡されたメソッドから何も返されません。この

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

よう{}括弧を削除してくださいまたはこの

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

Answer 2

Returnステートメントはproperty.YouがReact ComponentまたはReact elementを返す必要がレンダリングmonitorsとcomputersルートに欠けているように、そのメソッドにreturnを記述します。

<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> 

またはECMA6のデフォルトの戻り構文で

<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>