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

Question

提交按钮触发检索数据的方法，并且应该重定向到另一个组件以呈现和显示数据。问题是当组件仅调用组件渲染中的基本 jsx 时。菜单和表格似乎没有呈现。

更新

更多细节：

使用重定向将模拟加载路由“结果”，但 url 保持不变，“localhost:3000/”，唯一加载的是来自 homeroute 的“combinedheader”div。如果我只是输入到结果“page”、“localhost:3000/results”的路径，那么结果“page”会加载，但没有创建我在结果组件中设置的表所需的数据。我也尝试过使用“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;

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);

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>
}

结果.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.

Answer 1

这里是codesandbox，其中 onSubmit 我使用回调函数在HomeRoute.js 组件中触发重定向。我已经通过

将状态传递给另一个组件

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

在ResultsRoute.js 和componentDidMount() 中，您从this.props.location.state 设置新状态

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

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

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