React Router Redirect - отправка форм и попытки перенаправления для загрузки HomeRoute - PullRequest
Новая
       52

React Router Redirect - отправка форм и попытки перенаправления для загрузки HomeRoute

0 голосов
/ 30 сентября 2019

Кнопка «Отправить» запускает метод, который извлекает данные и должен перенаправлять на другой компонент для отображения и отображения данных. Проблема в том, что компонент вызывается только базовым jsx в компоненте рендеринга. Меню и таблица не отображаются.

Обновление

Дополнительная информация:

Использование перенаправления будет имитироватьзагружает маршрут «результаты», но URL остается прежним, «localhost: 3000 /», и единственное, что загружает, это div «комбинированный заголовок» из homeroute. Если я просто наберу маршрут к странице результатов, localhost: 3000 / 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;

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

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.

1 Ответ

2 голосов
/ 02 октября 2019

Здесь 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 });
    }
  }

Дайте мне знать, если вынужно более подробное объяснение

...