React js Navigate to another page with variable - reactjs

Question

I try to go from one page to another in React and that works. Only I would also like to send data. I am new to React and have tried a few things but I cannot come up with the right solution.
As an example this is my index.js:
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Firebase from 'firebase';
import config from './firebase';
import choicePayment from 'views/choiceMenuPayment/choiceMenuPayment';
// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";
import "assets/css/material-dashboard-react.css?v=1.8.0";
const hist = createBrowserHistory();
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/admin" component={Admin} />
<Route exact path="/betalen/:test" component={choicePayment} />
<Redirect from="/" to="/admin/dashboard" />
</Switch>
</Router>,
document.getElementById("root")
);
This my internalRoutes.js:
import Dashboard from "#material-ui/icons/Dashboard";
import AddCircleOutlineIcon from '#material-ui/icons/AddCircleOutline';
import ExitToAppIcon from '#material-ui/icons/ExitToApp';
import CalendarToday from '#material-ui/icons/CalendarToday';
import EuroSymbol from '#material-ui/icons/EuroSymbol';
import Tune from '#material-ui/icons/Tune';
import AddIcon from '#material-ui/icons/Add';
// core components/views for Admin layout
import DashboardPage from "views/Dashboard/Dashboard.js";
import choicePayment from "views/choiceMenuPayment/choiceMenuPayment.js";
const internalRoutes = [
{
path: "/betalen",
name: "Keuze menu",
icon: Dashboard,
component: choicePayment,
layout: "/admin"
},
];
export default internalRoutes;
What I am trying to do is go from the ChaskDesk.js page to the choiceMenuPayment.js page when the link is clicked. For now that is possible with a variable "hello world", only this does not work, I would like that if the link is clicked in ChaskDesk.js the page choiceMenuPayment.js opens with the data "hello world" somewhere in the html as output. This is my current attempt, however, this does not work, is there anyone who can explain to me how I can make this?
The code on chaskdesk.js :
<Link to={{pathname: "/betalen",
state:{
name: "Hello Wolrd"
}}} component={internalRoutes} className="btn btn-primary">hello</Link>
the destination page:
import React, { useEffect } from "react";
import { useState } from 'react';
import { makeStyles } from "#material-ui/core/styles";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import Close from '#material-ui/icons/Close';
import AddIcon from '#material-ui/icons/Add';
import RemoveIcon from '#material-ui/icons/Remove';
import { render } from "react-dom";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";
import internalRoutes from "internalRoutes";
//const data = this.props.match.params.test;
export default function ChoicePayment() {
useEffect(()=> {
const {name} = this.props.location.state;
console.log(name);
})
return (
<div>
<Container >
<h3>Maak keuze</h3>
<Row>
<Col md={8} >
<form>
<Row>
<Col md={6}>
<label>
Klant:
</label>
<br/>
<Link to="/" className="btn btn-primary">hello</Link>
</Col>
</Row>
</form>
</Col>
</Row>
</Container>
</div>
);
}

Answer 1

Looks like you are merging class components (using this) with functional components.
The need to pass props into a functional component. Try changing ChoicePayment to something like this
export default function ChoicePayment(props) {
useEffect(()=> {
const {name} = props.location.state;
console.log(name);
})
...
You can always console log props outside of useEffect too
export default function ChoicePayment(props) {
console.log(props);
....
EDIT
This is working for me
const Admin = (props) => {
console.log(props);
return (
<div>
<div>Welcome to Admin</div>
<Link to={{ pathname: "/betalen", state: { name: "Hello Wolrd" } }} className="btn btn-primary">Test</Link>
</div>
);
}
function Test(props) {
console.log(props);
useEffect(() => {
const { name } = props.location.state;
console.log(name);
}, []);
return (
<div>
<div>Welcome to Test</div>
<Link to={{ pathname: "/admin" }} className="btn btn-primary">Admin</Link>
</div>
);
}
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/betalen" component={Test} />
<Redirect from="/" to="/admin" />
</Switch>
</Router>,
document.getElementById("root")
);```