Warnung: [react-router] Standort "" hat keine Routen gefunden

Question

Ich bin Französisch, ich spreche wenig Englisch Es tut mir leid.

Ich habe ein ähnliches Problem. Ich versuche eine Filmseite mit OMDB API zu erstellen. Ich möchte die Details eines Films auf einer anderen Seite sehen.

Ich habe diese Fehlermeldung: "Warnung: [reagieren-Router] Standort "Batman Begins" brachte keine Routen gefunden, die"

App.js:

import React, { Component } from 'react'; 
import { render } from 'react-dom' 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from '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 } from 'react' 
import { render } from 'react-dom' 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from '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 } from 'react' 
import { render } from 'react-dom' 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from '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 } from 'react' 
import { render } from 'react-dom' 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from '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; 

Answer 1

Vielleicht diese Zeile ändern:

<h4><Link to={this.props.movie.Title} activeClassName="current">{this.props.movie.Title}</Link></h4> 

zu:

<h4><Link to={link} activeClassName="current">{this.props.movie.Title}</Link></h4> 

Answer 2

In Ihrem Movies.js Datei, ändern Sie diese

<h4><Link to={this.props.movie.Title} activeClassName="current">{this.props.movie.Title}</Link></h4> 

zu

<h4><Link to={'search/' + this.props.movie.Title} activeClassName="current">{this.props.movie.Title}</Link></h4> 

Weil Ihr Details.js ein Kind Route der Suche ist