Question

我发现这样的错误：未捕获错误：路由（...）：渲染没有返回任何内容。这通常意味着缺少退货声明。

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

monitors和computers路由呈现属性中缺少返回语句。您需要返回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默认返回语法

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

2 个答案: