How to change the URL with out actually routing to different page in react

Question

I am new to React.

I was experimenting with states in react.

I have constructed a screen with a form.

sample code looks like this:

var React = require('react');

module.exports = React.createClass({
    getInitialState: function(){
        return {
            attributeName:null,
            attributeId:null,
            app:null,
            URLstate:0
        };
    },
    getDefaultProps: function(){
        return{
            URI: [
            'Create Attribute',
            'Edit Attribute'
            ]
        };
    },
    propTypes: {
        URI: React.PropTypes.array
    },
    handleAttributeNameChange: function (event){
        this.setState({
            attributeName: event.target.value
        });
    },
    handleAttributeIdChange: function (event) {
        this.setState({
            attributeId:event.target.value
        });
    },
    handleAppNameChange:function (event) {
        this.setState({
            app:event.target.value
        });
    },
    handleSubmit:function (event) {
        this.setState({
            URLstate: (this.state.URLstate + 1) % 2
        });
    },
    render: function(){
        return (
                <div className = "container">
                <h2>{this.props.URI[this.state.URLstate]}</h2>
                <div id="attributes" className="form-horizontal">
                        <div className="form-group">
                            <label className="col-sm-2 control-label">Attribute Id</label>
                            <div className = "col-sm-3">
                                <input type="text" name="AttributeId" placeholder="" onChange={this.handleAttributeIdChange}/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-sm-2 control-label">Attribute Name</label>
                            <div className = "col-sm-3">
                                <input type="text" name="AttributeName" placeholder="" onChange={this.handleAttributeNameChange}/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-sm-2 control-label">App</label>
                            <div className = "col-sm-3">
                                <input type="text" name="forApp" placeholder="" onChange={this.handleAppNameChange}/>
                            </div>
                        </div>
                        <div className="form-group">
                            <div className = "col-sm-3 col-sm-push-2">
                                <button type="submit" onClick={this.handleSubmit}>submit</button>
                            </div>
                        </div>
                    </div>
                    </div>
            );
    }
});

The idea is to change just the title of the component from Create Attribute to Edit Attribute using states.

I have achieved it using the above code.

But the URL after creating a attribute looks some thing like this /createattribute?{query params}.

How can I change the URL(to somthing like editattribute/attributeId) with out actual routing to new page?

Thanks.

Why would you want to change the URL without routing to it?

Henrik Andersson
– Henrik Andersson

2015-08-10 07:54:11 +00:00
Commented Aug 10, 2015 at 7:54 — Henrik Andersson
– Henrik Andersson, Commented Aug 10, 2015 at 7:54

Ashley 'CptLemming' Wilson · Accepted Answer · 2015-08-10 08:09:35Z

2

Have you checked out React Router? This library handles URL state switching, loading components as views in a React-esque fashion.

var routes = (
  <Route handler={App} path="/">
    <Route name="create" path="createattribute" handler={CreateAttribute} />
    <Route name="edit" path="/editattribute/:attributeId" handler={EditAttribute} />
  </Route>
);

If you'd prefer to stay with the manual approach, you're probably looking for push state routing and the History API.

// Sample
var attributeId = 1;
var stateObj = { page: "edit" };
history.pushState(stateObj, "Edit Attribute", "editattribute/"+ attributeId);

More info here on getting started.

I would highly recommend you to check out React Router though. It works great and provides a simple and easy to reason about workflow for your React projects.

answered Aug 10, 2015 at 8:09

Ashley 'CptLemming' Wilson

9,6122 gold badges35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change the URL with out actually routing to different page in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related