为什么在ReactJ中的私人路线中通过道具无法正常工作

Question

这是该代码中文件pripateroute.js的mycode，

import React from "react";
import {Route,Redirect} from "react-router-dom"
import {isAuthenticated} from "./index"


const PrivateRoutes = (props)=>{

 return(
    isAuthenticated()?(<Route
    render={ (props) => 
      <component {...props}/>} />):
   (<Redirect to={{ pathname:"/signin"}}/>)
  //   <h1>hey there</h1>
   )
   
 }


 export default PrivateRoutes;

它说的是读取道具的值，但从未使用过，但我在渲染函数中使用它，破坏性也无法在这里工作。 这是我的布尔功能。如果它评估为true，我想进一步通往用户仪表板。

这就是我的路由。JS文件看起来像是

import React from 'react'
import {BrowserRouter,Route,Switch} from "react-router-dom";
import AdminRoutes from './auth/helper/AdminRoutes';
import PrivateRoutes from './auth/helper/PrivateRoutes';
import Home from './core/Home';
import AdminDashboard from './user/AdminDashBoard';
import Signin from './user/Signin';
import Signup from './user/Signup';
import UserDashboard from './user/UserDashBoard';


 function Routes() {
 return (
   <BrowserRouter>
  
   <Switch>
     <Route exact path='/' component={Home}  />
     <Route exact path="/signup" component={Signup} />
     <Route exact path="/signin" component={Signin} />
     <PrivateRoutes component="UserDashboard" exact path="/user/dashboard"/>
     <AdminRoutes exact path="/admin/dashboard" component={AdminDashboard}/>
   </Switch>

   </BrowserRouter>
  )
 }

 export default Routes

帮助我解决此问题。

Answer 1

这是因为您已经声明了 *两个函数，每个功能都采用props对象参数，但是只引用了内部/嵌套函数的 props 。

将嵌套道具命名为RouteProps之类的其他物质，并将两者都传播到渲染的组件中。还请记住，有效的反应组件名称是基于pascalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcalcal的。

示例：

const PrivateRoutes = ({ component: Component, ...props }) => {
  return isAuthenticated()
    ? (
      <Route
        render={(routeProps) => (
          <Component {...props} {...routeProps} />
        )}
      />
    ) : <Redirect to={{ pathname:"/signin"}}/>;
}

然后还要修复私有局组件用于传递值React组件参考而不是字符串。

<Switch>
  <Route path="/signup" component={Signup} />
  <Route path="/signin" component={Signin} />
  <PrivateRoutes component={UserDashboard} path="/user/dashboard" />
  <AdminRoutes path="/admin/dashboard" component={AdminDashboard} />
  <Route path='/' component={Home}  />
</Switch>