Question

我试图在路由组件中传递道具，我知道我们不能直接传递给它，所以我曾经渲染过，但道具在子组件中仍未定义。

import React from 'react';
//components
import Register from '../components/register/register';
import Login from "../components/login/login";
import  ForgetPassword from '../components/forget-password/forget-password';
//redux
import {store} from "../redux/store";
import { connect } from 'react-redux';
import actions from "../redux/authentication/actions";
//react-router
import {BrowserRouter,Route,Switch} from "react-router-dom";
//antd
import "antd/dist/antd.css";
//css
import '../global/_global.scss';

function Authentication(props) {
  console.log("PROPS", props)
  return (
    <div className="App">
    <BrowserRouter>
      {/*switch-component will render first that matches the includes path*/}
      <Switch>
        <Route  path='/login' component={Login} />
        <Route  exact  path='/' component={Login}  />
        <Route   path='/register'
          render={(props) => (
              <Register {...props} check={props.registerUser}  />
          )}
                   />
        <Route   path='/forget-password' component={ForgetPassword} />
      </Switch>
    </BrowserRouter>
    </div>
  );
}
function mapStateToProps(state){
  return state.reducers;
}
export default connect(mapStateToProps, actions)(Authentication);

Answer 1

试试这样使用

 return (
    <Route
      render={routeProps => (
        
          <Component {...routeProps} />
       
      )}
    />
  );

代替

return (
        <Route
          render={(routeProps) => (
            
              <Component {...routeProps} />
           
          )}
        />
      );

尽管在渲染中传递了道具，但它并未在路线中传递

1 个答案: