javascript - 组件未在重定向时呈现

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

在两条路线的路径之前添加“exact”

正如该问题中所解释的:React : difference between <Route exact path="/" /> and <Route path="/" />

路由器将遍历我们定义的所有路由并返回它找到的第一个匹配