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

Question

我是 this.I 的新手，很抱歉，如果这个问题可能已经在堆栈溢出中，我找不到完美的答案来回答我的问题

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

备注

第一个组件和第二个组件不是父子组件。这两个分量是个独立分量.

请帮忙解决这个问题

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;

拳头Class组件

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;

第二个 Class 组件

 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

您可以像查询一样传递参数；

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

然后点击第一个 link 可以是这样的；

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

最后，在第二个组件中，您可以获得城市价值；

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

更多信息：

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

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

reactjs

react-props