Component not rendering on redirect

Question

On submit of a form I want to redirect to another page. My files are as such:

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(Only relevant code is added here.):

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(The component to be rendered after submission)

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;

I have redirected if the is_success variable is true to the path show_parsed_results. In my router I have mapped this path to my Results component.

But on submission, the page is being redirected but it is empty. Its not picking up the Results component code at all. What am I missing here?

I understand this could be duplicate of Redirecting on form submit, but I have followed the exact same procedure and am not able to achieve the redirection correctly. Can some help in finding what I am missing here?

Thanks in advance.

Edit: adding tree structure and import statements.

Tree Structure:

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

After the redirect what is your URL ? Are you correctly importing the component Results inside `Main.js` ? — Weedoze, Mar 21 '19 at 07:37
Yes, I have added the tree structure and the import statements from Main.js. You can check it too. Thanks — leoOrion, Mar 21 '19 at 07:40
I think your import is erronous. It should be like that: import Results from "../Results/index"; — mstfyldz, Mar 21 '19 at 08:10
But my Home component is in the same structure and it is being picked up correctly. I tried nevertheless with index appended. It still does not work — leoOrion, Mar 21 '19 at 08:50
@Zhe no there is no error output but there is warning that says - `Warning: You tried to redirect to the same route you're currently on: "/show_parsed_results" ` — leoOrion, Mar 21 '19 at 09:21
@mstfyldz thanks. that worked. if you want, add it as an answer and I will accept. Also any idea why this fixes the issue? — leoOrion, Mar 21 '19 at 10:34
Hi @leoOrion to help others for help I added it as answer with explanation. — mstfyldz, Mar 21 '19 at 10:40

score 1 · Accepted Answer · answered Mar 21 '19 at 10:37

1

Add 'exact' before path of both Route

As explained in that question: React : difference between <Route exact path="/" /> and <Route path="/" />

the router will go through all of our defined routes and return the FIRST match it finds

answered Mar 21 '19 at 10:37

mstfyldz

482
1
4
10

Component not rendering on redirect

1 Answers1