Реагировать js Перейти на другую страницу с переменной

Question

Я пытаюсь go с одной страницы на другую в React, и это работает. Только я бы тоже хотел отправить данные. Я новичок в React и попробовал несколько вещей, но не могу найти правильное решение.

В качестве примера это мой индекс. 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")
);

Это мое 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;

Я пытаюсь сделать go со страницы ChaskDesk. js до страницы choiceMenuPayment. js при нажатии на ссылку. Пока что это возможно с переменной «hello world», только это не работает, я хотел бы, чтобы по ссылке щелкали в ChaskDesk. js страница choiceMenuPayment. js открывается с данными «hello world» где-то в html как вывод. Это моя текущая попытка, однако, она не работает, есть кто-нибудь, кто может объяснить мне, как я могу это сделать?

Код в chaskdesk. js:

<Link to={{pathname: "/betalen",
            state:{
                name: "Hello Wolrd"
            }}} component={internalRoutes} className="btn btn-primary">hello</Link>

страница назначения:

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

Похоже, вы объединяете компоненты класса (используя this) с функциональными компонентами.

Необходимость передачи реквизитов в функциональный компонент. Попробуйте изменить ChoicePayment на что-то вроде этого

export default function ChoicePayment(props) {

    useEffect(()=> {
        const {name} = props.location.state;
        console.log(name);
    })
    ...

Вы всегда можете настроить консоль журнала за пределами useEffect тоже

export default function ChoicePayment(props) {
    console.log(props);
    ....

РЕДАКТИРОВАТЬ Это работает для меня

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")
);```