reactjs - Warning: [react-router] Location"" did not match any routes -

i french , speak little english i'm sorry.

i have similar problem. trying make film site omdb api. want view details of film on page.

i have error message : "warning: [react-router] location "batman begins" did not match routes"

app.js :

import react, { component } 'react'; import { render } 'react-dom' import { router, route, link, indexroute, hashhistory, browserhistory } 'react-router';  var routes = require('./routes.js');  var app = react.createclass({     render: function(){         return(             <div>                 <routes />             </div>         )     } });  module.exports = app; 

routes.js :

import react, { component } 'react' import { render } 'react-dom' import { router, route, link, indexroute, hashhistory, browserhistory } 'react-router' var home = require('./home.js'); var contact = require('./contact.js'); var search = require('./search.js'); var notfound = require('./notfound.js'); var details = require('./details.js');  var routes = react.createclass({   render: function() {     return(         <router history={browserhistory}>             <route path='/' component={home} />             <route path='contact' component={contact} />             <route path='search' component={search}>                 <route path=":title" handler={require('./details.js')}/>             </route>         </router>     )   } });  module.exports = routes; 

movie.js :

import react, { component } 'react' import { render } 'react-dom' import { router, route, link, indexroute, hashhistory, browserhistory } 'react-router' var appactions = require('../actions/appactions'); var appstore = require ('../stores/appstore'); var details = require ('./details');  var movie = react.createclass({       render: function(){         var link = 'http://www.imdb.com/title/' + this.props.movie.imdbid;          return(             <div classname="well">                 <div classname="row">                     <div classname="col-md-4">                         <img classname="thumbnail" src={this.props.movie.poster} />                      </div>                     <div classname="col-md-8">                         <h4><link to={this.props.movie.title} activeclassname="current">{this.props.movie.title}</link></h4>                     </div>                 </div>             </div>             )     }, });  module.exports = movie; 

details.js

import react, { component } 'react' import { render } 'react-dom' import { router, route, link, indexroute, hashhistory, browserhistory } 'react-router' var appactions = require('../actions/appactions'); var appstore = require ('../stores/appstore');  // initialisation de la vue  var details = react.createclass({     render: function(){         var link = 'http://www.imdb.com/title/' + this.props.movie.imdbid;          return(             <div classname="well">                 <div classname="row">                     <div classname="col-md-4">                         <img classname="thumbnail" src={this.props.movie.poster} />                      </div>                     <div classname="col-md-8">                         <h4><a href={this.props.movie.title}> { this.props.movie.title}</a></h4>                         <ul classname="padding">                             <li classname="list-group-item">type : {this.props.movie.type}</li>                             <li classname="list-group-item">year released : {this.props.movie.year}</li>                             <li classname="list-group-item">id imdb : {this.props.movie.imdbid}</li>                         </ul>                         <a classname="btn btn-primary" href={link}>view on imdb</a>                     </div>                 </div>             </div>             )     }, });  // renvoie à app.js module.exports = details; 

maybe change line:

<h4><link to={this.props.movie.title} activeclassname="current">{this.props.movie.title}</link></h4> 

to:

<h4><link to={link} activeclassname="current">{this.props.movie.title}</link></h4>