Перенаправить, чтобы не перенаправить на нужный URL - Реагировать

Question

Я новичок в реакции и создаю небольшую поисковую систему. Со своей домашней страницы я собираю введенное пользователем ключевое слово, а затем извлекаю данные из бэкенда и хочу отобразить эти данные на своей странице результатов. Но он не перенаправляет на страницу '/ results' . Вот моя домашняя страница.js

import React from "react";
import SearchBar from "material-ui-search-bar";
import logo from "../searchpagelogo.png"
import AutoComplete from 'material-ui/AutoComplete';
import Redirect from "react-router-dom/es/Redirect";


class Homepage extends React.Component{
    constructor() {
        super();
        this.state = {
            results: [],
            dataFetched: false,
            keyword: ''
        };
        this.fetchData = this.fetchData.bind(this);
        this.redirect = this.redirect.bind(this);
    }
    render() {
        const searchStyle = {
            textAlign: 'center',
            width: 800,
            margin: '0 auto',
            display: 'block'
        };

        return (
            <div style={searchStyle}>
                <img src={logo} alt={'homepage application logo'}/>
                <br/>
                <br/>
                <SearchBar
                    onChange={(value) => this.setState({keyword: value})}
                    onRequestSearch={() => this.fetchData(this.state.keyword)}
                />
            </div>

        )
    }

     fetchData(keyword) {
        let url = 'http://localhost:8080/results?q=' + encodeURI(keyword);
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({results: data, dataFetched: !this.state.dataFetched});
                console.log(this.state.results)
                console.log(this.state.dataFetched)})
            .then(() => {
                if (this.state.dataFetched) {
                    console.log("Redirecting to redirect function")
                    this.redirect()
                }
            })
    }

    redirect() {
        console.log("Inside Redirect function")
        return (
                <Redirect to = {{
                    pathname: '/results',
                    state: {results: this.state.results}
                }}/>
            )
    }
}

export default Homepage;

Я также добавил часть реагирующего маршрутизатора в файл index.js . Вот index.js Что именно я делаю не так. Любая помощь / предложение очень ценится.

Пожалуйста, прокомментируйте для получения дополнительной информации.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import SearchResultsPage from './components/SearchResultsPage'
import {Route, Link, BrowserRouter as Router} from 'react-router-dom';

const routing = (
    <Router>
        <div>
            <Route exact path={'/'} component={App}/>
            <Route path={'/results'} component={SearchResultsPage}/>
        </div>
    </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

Answer 1

Перенаправление работает в функции рендера. Вы можете написать

render() {

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


    const searchStyle = {
        textAlign: 'center',
        width: 800,
        margin: '0 auto',
        display: 'block'
    };

    return (
        <div style={searchStyle}>
            <img src={logo} alt={'homepage application logo'}/>
            <br/>
            <br/>
            <SearchBar
                onChange={(value) => this.setState({keyword: value})}
                onRequestSearch={() => this.fetchData(this.state.keyword)}
            />
        </div>

    )
}