Reactjs React Router Redirect-表单提交并重定向尝试加载HomeRoute

Submit按钮触发一个方法，该方法检索数据，并应重定向到另一个组件以呈现和显示数据。问题是当组件被调用时，组件呈现中只有基本的jsx。菜单和桌子似乎无法呈现

更新

进一步详情：

使用重定向将模拟加载路由“results”，但url保持不变，“localhost:3000/”，唯一加载的是来自homeroute的“combinedheader”div。如果我只是键入到结果“page”、“localhost:3000/results”的路由，那么结果“page”将加载，但没有创建我在results组件中设置的表所需的数据。我还尝试使用“this.props.history.location/（/results”）。这让我更接近了，但是应该发送到结果页面的数据需要从“Form.js”发送

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
import HomeRoute from './routes/homeroute';
import ResultsRoute from './routes/resultsroute';
import NotFound from './routes/notfoundroute';
import './App.css';

class App extends Component {
    render(){
      return ( 
        <div id="App" className="container">
          <Router>
            <Switch>
              <Redirect exact from='/' to='/home' />
              <Route exact path='/home' component={HomeRoute} />
              <Route path='/results' component={ResultsRoute} />
              <Route component={NotFound} />
            </Switch>
          </Router>
        </div> 
      )
    }
} 


export default App;

从“React”导入React，{Component}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Redirect}；
从“./routes/HomeRoute”导入HomeRoute；
从“./routes/ResultsRoute”导入ResultsRoute；
从“/routes/notfoundroute”导入NotFound；
导入“/App.css”；
类应用程序扩展组件{
render（）{
报税表（
)
}
} 
导出默认应用程序；

Home.js

import React, { Component } from 'react';
import { Container } from 'semantic-ui-react';
import Form  from '../components/form';
import { withRouter } from 'react-router-dom'

class HomeRoute extends Component {

  state = { activeItem: 'calculate commission' }

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    const { activeItem } = this.state

    return (
        <div>
            <div id="combinedheader">
                <div className="ui top attached header">
                    <h4  id="partnerlogo">TEST</h4>
                    <h4 className="navbar-brand projectlookupheader"> HEADER</h4>
                </div>
                <Container id="tabcontainer">
                    <ProjectSearchForm />
                </Container>
            </div>
        </div>
    )
  }
}

export default withRouter(HomeRoute);

import React，{Component}来自'React'；
从“语义ui反应”导入{Container}；
从“../components/Form”导入表单；
从“react router dom”导入{withRouter}
类HomeRoute扩展组件{
状态={activeItem:'计算佣金'}
componentDidMount（）{
console.log（this.props）；
}
render（）{
const{activeItem}=this.state
返回(
测验
标题
)
}
}
使用路由器导出默认值（HomeRoute）；

Form.js

    handleSubmit=()=> {

          await axios.get('path', 
          {
            params: {
             ...
            }

          })
          .then((response) => {
            ...
          } 
          else
          {
          ...
          })
          .catch(function(error){
            ...
          })
          .finally(( ) => { 
            this.setState({ loadState: "disabled", redirect: true})

          })
    }
    render() {
        const { formFields, activeItem } = this.state

        if(this.state.redirect){
            return <Redirect to={{
                pathname: '/results', 
                state: { records: this.state.records }
            }} />
        }

    <Form onSubmit={(event) => this.handleSubmit(event)}>

   </Form>
}

handleSubmit=（）=>{
等待axios.get（'path'，
{
参数：{
...
}
})
。然后（（响应）=>{
...
} 
其他的
{
...
})
.catch（函数（错误）{
...
})
.最后（（）=>{
this.setState（{loadState:“disabled”，redirect:true}）
})
}
render（）{
const{formFields，activeItem}=this.state
if（this.state.redirect）{
回来
}
this.handleSubmit（event）}>
}

Results.js

import React, { Component } from 'react';
import { Table } from '../components/table';
import { BrowserRouter as Link } from 'react-router-dom';
import { Menu, Container } from 'semantic-ui-react';


class ResultsRoute extends Component {

    constructor(props){
        super(props);

        this.state = {
        }
    }
    handleItemClick = (e, { name }) => {
        this.setState({ activeItem: name });
        console.log(name);
    }

    render(){

        const { activeItem } = this.state

        return(
            <Container>
                <div id="menusegment">
                    <Menu pointing secondary>
                        <Menu.Item as={Link} to="/" name='home' onClick={this.handleItemClick} />
                        <Menu.Item as={Link} to="/archive" name='archive' active={activeItem === 'archive'} onClick={this.handleItemClick} />
                    </Menu>
                </div>
                <div id="combinedheader">
                    <div className="ui top attached header">
                        <h4  id="partnerlogo">TEST</h4>
                        <h4 className="navbar-brand projectlookupheader"> HEADER</h4>
                    </div>
                    <Container id="tabcontainer">
                        {/* <Table results={this.props.location.state.records} /> */}
                        <div> Hello Dolly! </div>
                    </Container>
                </div>
            </Container>
        )
    }

export default ResultsRoute;

Expected result is the that the data returned from api response is sent from form.js to results.js using the redirect logic in form.js when the form is submitted. Current result is that only the 'combinedheader' in the results.js  displays. The menu and the table don't seem to render.

import React，{Component}来自'React'；
从“../components/Table”导入{Table}；
从“react router dom”导入{BrowserRouter as Link}；
从“语义ui反应”导入{Menu，Container}；
类ResultsRoute扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
handleItemClick=（e，{name}）=>{
this.setState（{activeItem:name}）；
console.log（名称）；
}
render（）{
const{activeItem}=this.state
返回(
测验
标题
{/*  */}
你好，多莉！
)
}
导出默认结果路由；
预期结果是，当表单提交时，api响应返回的数据使用form.js中的重定向逻辑从form.js发送到results.js。当前结果是，仅显示results.js中的“combinedheader”。菜单和表似乎没有呈现。

这里是onSubmit我在

HomeRoute.js

组件中使用回调函数触发重定向的地方。我已经通过

<Redirect
 to={{
   pathname: "/results",
   state: { data }
 }}
/>

---

如果您需要更详细的解释，请告诉我。

对不起！它已更新。我保证它在代码中。我粘贴代码时，只是混淆了一些代码。ResultsRoute中的状态如何？如何在ResultsRoute（componentDidMount（））中设置状态？你能找出哪里出了问题吗？还没有。我将尝试你的建议，在组件装载时设置状态，并尝试使用历史记录。按下按钮让我进入页面。结果仍然相同。我必须找到一种方法，在表单提交到结果后，从表单传递包含api响应数据的状态通用电气，你是个救生员，快拨！

 componentDidMount() {
    const { location } = this.props;

    if (location.state) {
      this.setState({ data: location.state.data });
    }
  }