reactjs - react-router v2.0 deep nested component passing in additional unexpected url -

i have been trying solve problem i've facing last few days routing deep nested component. using reactjs v14.6 , react-router v2.0 browserhistory. if swap out hashhistory , use deprecated history mixin works expected.

i have rendered , able route default home page profile page using react-router. have child component called searchgithub nav bar rendered on both home , profile components. basic search takes query param profile/:username routes profile component/page. followed documents on swapping out history mixing higher order functions

its when try , use search component on profile page experiencing problems. adding additional /profile in url. example home page route http://localhost:3000/profile/tyler if on profile page , try , search username url instead becomes http://localhost:3000/profile/profile/tyler causing error warning: [react-router] location "/profile/profile/tyler" did not match routes

here link github repo see full project

i don't think problem lies in browserhistory or on server.js file rather problem in either routes file or in 1 of components. feel free check out link above pull full project , install dependencies if needed. think has not passing in location descriptor not sure third argument needed passed this.context.router.push()

here /app.jsx component

var react = require('react'); var reactdom = require('react-dom'); var router = require('react-router').router; var routes = require('./config/routes'); var browserhistory = require('react-router').browserhistory;  reactdom.render(   <router history={browserhistory} routes={routes} />,   document.getelementbyid('app') ); 

here /routes.jsx

var react = require('react'); var main = require('../components/main'); var home = require('../components/home'); var profile = require('../components/profile'); var router = require('react-router'); var route = router.route; var indexroute = router.indexroute;  module.exports = (   <route path="/" component={main}>     <route path="profile/:username" component={profile} />     <indexroute component={home} />   </route> ); 

here /searchgithub.jsx

var react = require('react'); var router = require('react-router');  var searchgithub = react.createclass({   contexttypes: {     router: react.proptypes.object.isrequired,   },    getref: function(ref) {     this.usernameref = ref;   },    handlesubmit: function() {     var username = this.usernameref.value;     this.usernameref.value = '';     this.context.router.push('profile/' + username, null);   },    render: function() {     return (       <div classname="col-sm-12">         <form onsubmit={this.handlesubmit}>           <div classname="form-group col-sm-7">             <input type="text" classname="form-control" ref={this.getref} />           </div>           <div classname="form-group col-sm-5">             <button type="submit" classname="btn btn-block btn-primary">search github</button>           </div>         </form>       </div>     );   }, });  module.exports = searchgithub; 

here /main.jsx

var react = require('react'); var searchgithub = require('./searchgithub');  var main = react.createclass({   render: function() {     return (       <div classname="main-container">         <nav classname="navbar navbar-default" role="navigation">           <div classname="col-sm-7 col-sm-offset-2" style={{ margintop: 15 }}>             <searchgithub />           </div>         </nav>         <div classname="container">           {this.props.children}         </div>       </div>     );   }, });  module.exports = main; 

i have feeling has router.push({ pathname, query, state }) // new "location descriptor", hoping can been pulling hair out trying figure out doing wrong. curious how implement location descriptor if in fact causing problem

helped out on discord, i'll post here well.

currently react-router + history not work relative transitions. see relevant github issue here - https://github.com/rackt/history/issues/135.

also should either pass pathname router or location descriptor single object.

 this.context.router.push('/profile/' + username); 

or

this.context.router.push({ pathname: '/profile/' + username }); 

note leading /