位置“/”处的 ReactJS 路由器匹配的叶路由没有元素

Question

位置“/”处的匹配叶路由没有元素。这意味着默认情况下它将呈现具有空值的，从而导致“空”页面。

//App.js File

import {Route, Routes} from 'react-router-dom';
import ProductList from './ProductList';

const App = () => {
  return (

    <Router >
      <Routes>
        <Route
        exact
        path="/"
        render=
        { props => 
        { 
        <ProductList {...props} 
        products={this.state.products} 
        currentCategory={this.state.currentCategory} 
        addToCart={this.addToCart} info={productInfo}/> 
        } }/>
      </Routes>
    </Router>


  )
}

export default App;

当我开始向程序添加路由时出现此错误，我认为问题出在 render 方法中。

使用 React 路由器

Answer 1

您的渲染方法没有 returning 任何值。要 return 来自箭头函数的值，请使用 () 或 return 或简单地省略 {}.

和()

<Route
  exact
  path="/"
  render=
    { props => 
      { 
        (<ProductList {...props} 
          products={this.state.products} 
          currentCategory={this.state.currentCategory} 
          addToCart={this.addToCart} info={productInfo} />)
      }
    }
/>

与return

<Route
  exact
  path="/"
  render=
    { props => 
      { 
        return <ProductList {...props} 
          products={this.state.products} 
          currentCategory={this.state.currentCategory} 
          addToCart={this.addToCart} info={productInfo} />
      }
    }
/>

没有{}:

<Route
  exact
  path="/"
  render=
    { props => 
      <ProductList {...props} 
        products={this.state.products} 
        currentCategory={this.state.currentCategory} 
        addToCart={this.addToCart} info={productInfo} />
    }
/>

Answer 2

通过删除渲染并像这样编辑它已修复。

<Route
  exact
  path="/"
  element={< ProductList products = {
  this.state.products
}
currentCategory = {
  this.state.currentCategory
}
addToCart = {
  this.addToCart
}
info = {
  productInfo
} />}/>

位置“/”处的 ReactJS 路由器匹配的叶路由没有元素

ReactJS router Matched leaf route at location "/" does not have an element

javascript

reactjs

react-router