In React, How do I redirect a user back to the index with altered state

Ad

In my React.JS application, I want to create a link which does nothing more than alter the client's state, but show the main index page. For example, the main page is:

http://example.com/#/

This shows the main index page. Now, if a user is directed to this page:

http://example.com/#/check?arg=abcd

I would want to still show the user the main index page, but have the this.props variable be affected by the arg=abcd

I define my routes with:

var routes = (
    <Route handler={APP}>
        <DefaultRoute handler={Index} />
        <Route name="check" path="check" handler={check}></Route>
    </Route>
);

So I do have a route which takes in a check path, but again my goal is to just use the argument to check and still keep showing the regular index page.

What is the most efficient way of doing this with React.JS?

Ad

Answer

Ad

I just realized that I could circumvent the need of a second page and router. All I need to do is use an argument handler on the index page. I am away from work and on mobile so I will answer my own question tomorrow when I get in.

Update -- So this is how I got it working:

I added a new line to the route set up:

var routes = (
    <Route handler={APP}>
        <DefaultRoute handler={Index} />
        <Route path="/arg1/:arg1" handler={Index} />
    </Route>
);

The line with arg1. Then I made sure the handler to that path was {Index}. Now, within my component, I have the following line:

componentWillMount() {
    this._handleArgs(this.props.params.arg1);
},

Which will handle (or not-handle if arg1 is null) any args before mounting the component.

So, no need to add a new component, just another route to the same component and some helper functions.

Ad
source: stackoverflow.com
Ad