How to pass Form via URL

Question

Hello, I’m new to React I have a Home Component that has a Form I would like to know how to get the inputs of this form and pass via get to another component: On routes I passed like this

<Route exact path="/listagem/:inicial/:final/:ordem" component={Listagem} />

Home URL

import React from "react";
import React-Router-Dom from "react-router-dom";

const Home = () => {
 
  return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5 ">
        <h2 className="text-center mb-4">Consulta Cadastro</h2>
        <form>
        <div className="row">
          <div className="col-md-6 mb-3">
            <label for="firstName" className="font-weight-bold">Data Inicial</label>
            <input type="date" class="form-control" name="inicial" />
          </div>
          <div className="col-md-6 mb-3">
            <label for="lastName" className="font-weight-bold">Data Final</label>
            <input type="date" class="form-control" name="final" />
          </div>
        </div>
        <hr class="mb-4" /> 
        <h4 class="mb-3">Ordem do Relatório</h4>
        <div class="row">
          <div class="col-md-4 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="ordem" value="codigo" />
            <label class="form-check-label">
              Ordenar por Código
            </label>
            </div>
          </div>
          <div class="col-md-4 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="ordem" value="produto" />
            <label class="form-check-label">
              Ordenar por Produto
            </label>
            </div>
          </div>
          <div class="col-md-4 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="ordem" value="periodo" />
            <label class="form-check-label">
              Ordenar por Período
            </label>
            </div>
          </div>
        </div>
          <button className="btn btn-primary btn-block">Buscar</button>
        </form>
      </div>
    </div>
  );
};

export default Home;

Should I pass the Onclick like this ::

<button onclick={listagem/:inicial/:final/:ordem} className="btn btn-primary btn-block">Buscar</button>

Answer 1

The first part would be:

• Set States to store the value of each form input.

After having every state, you would have to choose:

• Pass state to the component you want to use (like a post)
• Or pass via URL parameter (as if it were a get) ai yes would use the url idea.com/param1/param2, this would only work if the data were simple, there are several limitations in GET parameters and usually things are not done like this in React.