Question

提交表单后，我想重定向到另一个页面。我的文件是这样的：

Main.js

import Home from '../Home'
import Results from "../Results";

    class Main extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/" component={Home}/>
                    <Route path="/show_parsed_results" exact component={Results}/>
                </Switch>
            </Router>
        );
    }
}

export default Main;

Home.js（仅在此处添加相关代码。）：

class Home extends Component {
    state = {
        filepath: '',
        skiplines: 0,
        is_loading: false,
        is_error: false,
        is_success: false,
        err_message: ''
    };

    handleSubmit = event => {
        event.preventDefault();

        API.post(`path`, path_inputs)
            .then(res => {
                console.log(res);
                console.log(res.data);
                this.setState({
                    is_loading: false,
                    is_success: true
                })
            })
            .catch(err => {
                this.setState({
                    is_error: true,
                    is_loading: false,
                    err_message: err['message']
                })
            })
    };

    render() {
        if (this.state.is_success) {
            return <Redirect to='/show_parsed_results'/>
        } else {
            return (
                .....render form here.....
            );
        }
    }
}

export default Home;

Results.js（提交后要呈现的组件）

class Results extends Component {
    render() {
        return (
            <div className="container">
                <Button className="center-align">Show Product Price Per Place </Button>
                <Button className="center-align">Show Sales Aggregation Per Place </Button>
            </div>
        );
    }
}

export default Results;

如果is_success变量为true，我已重定向到路径show_parsed_results。在路由器中，我已将此路径映射到我的Results组件。

但是在提交时，页面正在被重定向，但是它是空的。它根本不使用结果组件代码。我在这里想念什么？

我知道这可以与Redirecting on form submit重复，但是我遵循了完全相同的过程，并且无法正确实现重定向。可以帮助您找到我在这里缺少的东西吗？

谢谢。

编辑：添加树结构和导入语句。

树结构：

.
├── App.css
├── App.test.js
├── Home
│   └── index.js
├── Main
│   └── index.js
├── Results
│   └── index.js
├── api
│   └── index.js

Answer 1

在两条路线的路径前添加“精确”

如该问题所述：React : difference between <Route exact path="/" /> and <Route path="/" />

路由器将通过我们定义的所有路由，并返回它找到的第一个匹配项

组件未在重定向时呈现

1 个答案: