将 function 参数从 App.js 传递给 React 中的其他组件

Question

I am trying to pass my snackbar component from App.js to other component using the function as follows:

const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setsnackbarMessage] = React.useState("");
  const [snackbarSeverity, setSnackbarSeverity] = React.useState("");


 const showSnackbar =  (message, severity)=> {
    setSnackbarOpen(true)
    setsnackbarMessage(message)
    setSnackbarSeverity(severity)
    return false
  }
 <MuiThemeProvider theme={theme}>
      <SnackBarAlert
          open={snackbarOpen} 
          setOpen={setSnackbarOpen}
          message={snackbarMessage}
          severity={snackbarSeverity}
        />
    <Router> 
 <Route exact path="/signup" component={Login}  showSnackbar={showSnackbar}/>
</Router>
  </Router>
        </MuiThemeProvider>

Following is what i am trying to do in my Login component:

async function handleLogin (props) {
    var apiBaseUrl = `${hostUrl}/user/v1/log-in`;
    var data = {
      emailId: email,
      password: password,
    };
    var headers = {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
    };
    axios
      .post(apiBaseUrl, data, { headers: headers })
      .then((response) => {
        //dispatch(sign_in);
        if (response.status === 200) {
          console.log("Logged in successfully");
          props.showSnackbar("Logged In Successfully", "error");
          let string = window.location.origin + "/Home";
          window.open(string, "_self");
        }
      })
      .catch((err) => {
          console.log("######", err.response);
          var errorCode = err.response.data.status.code;
          var errorMessage = err.response.data.status.message;
          console.log("Message data is", errorMessage);
          if (errorCode === 1008) {
            setresendEnabled(true);
            props.showSnackbar(errorMessage ,  "error");
          } else {
            props.showSnackbar(errorMessage , "error" );
        }
      });
  };

Follwing error is coming up while using it:

enter image description here

Answer 1

For passing props to a component inside a Route you can use the render prop like this

<Route
  exact path="/signup"
  render={() => (
    <Login showSnackbar={showSnackbar} />
  )}
/>