Question

我是新来做出反应并建立一个小型搜索引擎的人。在我的主页上，我正在收集用户输入的关键字，然后从后端获取数据，我想在结果页上显示这些数据。但是它不会重定向到'/结果'页面。这是我的Homepage.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 文件中添加了react router部分。这是 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>

    )
}

重定向到不重定向到所需的URL-React

1 个答案: