如何在 URL React js 中传递变量

Question

在 react js 中，我制作了一个简单的日期选择器，并从下拉日历中选择日期并将其显示在控制台中。

存储在变量中的日期，现在如何在 URL 中使用该变量

我的问题：

1. 如何在 React js URL 中传递参数

2. 如何在控制台日志中打印参数

代码：

import React, { Component } from 'react'
import axios from 'axios'
class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',
            
        }
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        console.log(this.state)
        axios
            .get('http://127.0.0.1:8000/hvals_hash?key=31/8/21')
            .then(response => {
                console.log(response)
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        const { key } = this.state
        return (
            <div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                    </div>

                    <button type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default PostForm

日期来自日期选择器表单，所以传递日期动态所有如何做到这一点

Answer 1

您可以使用template literals 传递动态值，如下所示。

componentDidMount(){
    const date = "20/8/21";
    axios.get(`http://127.0.0.1:8000/hvals_hash?key=${date}`)
    .then(response => {
        this.setState({
            posts:response.data
        })
        console.log(response.data)


    })
}

Answer 2

 import {
  BrowserRouter,
  useParams,
  Route,
  Routes,
  Link,
} from 'react-router-dom';

page:send.jsx  =>

  <Link to="/get" state={{ from: "test" }}>
        test
        </Link>
page:get.jsx

import {
  BrowserRouter,
  useParams,
  Route,
  Routes,
  Link,
  useNavigate,
  useLocation,
} from "react-router-dom";

  const location = useLocation();
const { from } = location.state ? location.state : "null";
  console.log(from);

send:
  const { navigate } = useNavigate();
  navigate("/get", { state: { from: "test" } });
get:
  const location = useLocation();
  const { from } = location.state;
  console.log(from);