Page Not Changing After Clicking Link Using React Router

So I was Trying to Change My Page And perform various functions before it by clicking a button, but On Clicking It, It Only Changes the URL. I Wanted To Load The Whole Page instead

Here's The Code:

var MultiSelect = require("react-selectize").MultiSelect;
var React = require('react');
var ReactDOM = require('react-dom');
import {Link} from 'react-router'
import { browserHistory } from 'react-router'

export default React.createClass({
handleCommentSubmit: function(iData) {
    console.log(JSON.stringify(iData, null, 2));
    var payload = {
        location: $('#name').val(),
        interests:null,
        hours: $('#hours').val()
    }
    browserHistory.push('home.html#/map')
    console.log(payload);
},
render: function() {
    return (

        <div className="container">
            <div className="logo"><img src="Images/logo new.png" /></div>
            <div className="formData">
                <div id="formContainer">
                    <InputFPage onCommentSubmit={this.handleCommentSubmit}/>
                </div>
            </div>
        </div>
    );
}
});

var InputFPage = React.createClass({
getInitialState: function() {
    return {location: '',selected:'' ,time: ''};
},
handleLocationChange: function(e) {
    this.setState({location: e.target.value});
},
handleTimeChange: function(e) {
    this.setState({time: e.target.value});
},
handleSubmit: function(e) {
    e.preventDefault();
    var location = this.state.location.trim();
    var time = this.state.time.trim();
    var selected = this.state.selected;
    if (!location || !time) {
        return;
    }
    this.props.onCommentSubmit({location: location,selected:selected ,time: time});
    this.setState({location: '',selected:'' ,time: ''});
},
onVChange:function(selected){
    this.setState({selected: selected});
},
render:function(){
    return(
        <form className="inputFPageForm" onSubmit={this.handleSubmit}>

            <div className="group">
                <input type = "text" placeholder = "Where Do You Wanna Go?" id = "name" value={this.state.location} onChange={this.handleLocationChange}/>
            </div>

            <div className="group">
                <App selected = {this.state.selected} callback = {this.onVChange}/>
            </div>

            <div className="group">
                <input type = "number" placeholder = "How Many Hours Do You Have?" id = "hours" value={this.state.time} onChange={this.handleTimeChange}/>
            </div>

          <div className="submit"><input id = "submit" type="submit" value="Let's Go !"/></div>
        </form>
    )
}
});

var App = React.createClass({

// render :: a -> ReactElement
render: function(){
    var self = this;
    var interests = JSON.stringify(self.state.selected, null, 2);
    return <div>
        <MultiSelect
            ref = "select"
            placeholder = "What Are Your Interests?"
            options = {this.state.places}
            value = {this.state.selected}

            // onValueChange :: Item -> (a -> Void) -> void
            onValuesChange = {function(selected){
                self.setState({selected: selected});
                self.props.callback(selected);

            }}

            // renderNoResultsFound :: a -> ReactElement
            renderNoResultsFound = {function() {
                return <div className = "no-results-found">
                    {!!self.req ? "loading Places ..." : "No results found"}
                </div>
            }}
        />
    </div>
},

// getInitialState :: a -> UIState
getInitialState: function(){
    return {
        places: [],
        selected: this.props.selected
    };
},

// component-will-mount :: a -> Void
componentWillMount: function(){
    var self = this;
    this.req =self.setState({places: placeTypes}, function(){
            self.refs.select.highlightFirstSelectableOption();
        });

}
});