[英]How to solve "Functions are not valid as a React child." error when I try to render a components based on the output of a function?
In my App.js file of the application, I am setting the routes of the app.在应用程序的 App.js 文件中,我正在设置应用程序的路由。
This is the code of my App.js file这是我的 App.js 文件的代码
import React, {useEffect} from "react";
import {Container} from '@material-ui/core';
import {BrowserRouter, Routes, Route, Navigate} from 'react-router-dom';
import { gapi } from 'gapi-script';
import Navbar from "./components/Navbar/Navbar";
import Home from './components/Home/Home';
import Auth from "./components/Auth/Auth";
import MealsPage from "./components/MealsPage/MealsPage";
import WorkoutDetails from "./components/WorkoutDetails/WorkoutDetails";
const App=()=>{
const user=JSON.parse(localStorage.getItem('profile'));
useEffect(() => {
const start = () => {
gapi.auth2.init({
clientId: process.env.REACT_APP_GOOGLE_API_TOKEN,
scope: ""
})
};
gapi.load('client:auth2', start);
})
return(
<BrowserRouter>
<Container maxWidth="xl">
<Navbar/>
<Routes>
<Route path="/" exact ={()=>{<Navigate to="/workouts"/>}}/>
<Route path="/workouts" exact element={<Home/>}/>
<Route path="/workouts/search" exact element={<Home/>}/>
<Route path="/workouts/:id" element={<WorkoutDetails/>}/>
<Route path="/meals" exact element={<MealsPage/>}/>
<Route path="/auth" exact element={()=>{!user? <Auth/>:<Navigate to="/workouts"/>}}/>
</Routes>
</Container>
</BrowserRouter>
);
}
export default App;
I am getting an error that says this:我收到一条错误消息:
react-dom.development.js:67
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
I assume it is from the Auth route as it does not specify an element to render when we have that specific route, but it specifies a function.我假设它来自 Auth 路由,因为它没有指定当我们拥有该特定路由时要呈现的元素,但它指定了一个函数。 Basically, when the user is logged in, he should not see the auth component because he is already logged in and he should be redirected to the '/workouts' route which is another page in the application.
基本上,当用户登录时,他不应该看到 auth 组件,因为他已经登录并且他应该被重定向到“/workouts”路径,这是应用程序中的另一个页面。
Could you help me solve this?你能帮我解决这个问题吗?
Here element={()=>{!user? <Auth/>:<Navigate to="/workouts"/>}}
这里
element={()=>{!user? <Auth/>:<Navigate to="/workouts"/>}}
element={()=>{!user? <Auth/>:<Navigate to="/workouts"/>}}
. element={()=>{!user? <Auth/>:<Navigate to="/workouts"/>}}
。 Try it like element={user? <Navigate to="/workouts"/> : <Auth/>}
像
element={user? <Navigate to="/workouts"/> : <Auth/>}
element={user? <Navigate to="/workouts"/> : <Auth/>}
or return component like element={()=>!user? <Auth/>:<Navigate to="/workouts"/>}
element={user? <Navigate to="/workouts"/> : <Auth/>}
或返回像element={()=>!user? <Auth/>:<Navigate to="/workouts"/>}
element={()=>!user? <Auth/>:<Navigate to="/workouts"/>}
or element={()=>{return !user? <Auth/>:<Navigate to="/workouts"/>}}
element={()=>!user? <Auth/>:<Navigate to="/workouts"/>}
或element={()=>{return !user? <Auth/>:<Navigate to="/workouts"/>}}
element={()=>{return !user? <Auth/>:<Navigate to="/workouts"/>}}
Looking at the documentation for <Route />
, the element
prop is meant to be an element - not a function returning an element .查看
<Route />
的文档, element
prop 是一个元素,而不是返回元素的函数。
Therefore, you should simply be able to remove the function call and pass the element directly:因此,您应该能够简单地删除函数调用并直接传递元素:
<Route
path="/auth"
exact
element={!user ? <Auth/> : <Navigate to="/workouts"/>}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.