React Router 不呈现组件，说缺少 return 语句

Question

我收到这样的错误：未捕获错误：路由(...)：渲染中没有returned。这通常意味着缺少 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"/>}/>

或者像这样在那个方法中写return

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

Answer 2

Return 语句在 monitors 和 computers 路由渲染中丢失 property.You 需要 return React Component 或 React element .

<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 默认 return 语法

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

React Router 不呈现组件，说缺少 return 语句

React Router not rendering component, says return statement missing

router

reactjs