Navigate to anther component while on-form submit and passing the data to navigating component react Js

Question

I am new to this.I am sorry if maybe this question are already in stack-overflow I cannot find-out perfect on answer for my question

From fist component i get a input set to state. Now i need to pass the value to second component and navigate to second component while on-click from the fist component. i already have navigation link. But I need to navigate while on-form submit and passing the data to navigating component

Note

The fist component and second component are Not Parent child component. These two component are individual independent component.

Kindly help to solve this

app.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Fist from './components/fist';
import Second from './components/Second';
import Navigation from './components/Navigation';
import Signup from './components/Signup';
import Signin from './components/Singin';

function App() {
return (
    <div className="App">
        <BrowserRouter>
            <div>

                <Navigation />
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route path="/Signin" component={Signin} />
                    <Route path="/Signup" component={Signup} />
                    <Route path="/fist" component={Fist} />
                    <Route path="/contact" component={Contact} />
                    <Route path="/Second" component={second} />


                </Switch>
            </div>
        </BrowserRouter>
    </div>
);
}

export default App;

Fist Class Component

import React, { Component } from 'react';

class Fist extends Component {

constructor(props) { super(props) ;}

  render() {
    return (
             <div>
            <input name="City" Placeholder="City" type="text" onChange={e => this.setState({ City: e.target.value }) }>
             <button class="loginbtn" type="submit" >Next </button>
           </div>
           );
           }
}
export default Fist;

Second Class component

 import React, { Component } from 'react';

 class Second extends Component {

constructor(props) {
    super(props);
    this.state = {
        city: this.props.match.params
    } 
}

render() {
    return (
        <div>
            <p> Code above </p>
            <p> {this.state.City}</p>
            <p> code below</p>
        </div>
    )
}
}
  export default Second;

Answer 1

You can pass parameters on query like;

<Route path="/Second:city" component={second} />

And click from first link can be something like this;

<Link to={`/second/${this.state.city}`}>

Finally in second component you can get the city value with;

const { city } = this.props.match.params;

For more info: Click here