在表单提交时导航到另一个组件，并将数据传递给导航组件react Js

问题描述

这是我的新手。很抱歉，如果这个问题已经在堆栈溢出中，我无法找到完美的答案

从拳头组件中，我得到一个输入状态集。现在，我需要将值传递给第二个组件，并在从第一个组件单击时导航到第二个组件。 我已经有导航链接。但是我需要在进行表单提交并将数据传递到导航组件时进行导航

注意

第一部分和第二部分是非父子部分。 这两个组件是个人独立组件。

请帮助解决此问题

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;

拳头类组件

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;

第二类组件

 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;

解决方法

您可以在查询中传递参数，例如；

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

第一个链接中的点击可以是这样；

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

最后，您可以在第二部分中获得城市价值；

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

有关更多信息：Click here