警告：[react-router]位置「」與任何路線不匹配

我是法國人，我說的很少英文對不起。警告：[react-router]位置「」與任何路線不匹配

我有類似的問題。我正在嘗試使用OMDB API製作電影網站。我想在另一頁上查看電影的細節。

我有這樣的錯誤消息：「警告：[反應路由器]的位置」蝙蝠俠前傳「沒有匹配的路由」

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;

來源

2016-08-01 DenisMasot

可能改變這一行：

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

到：

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

來源

2016-08-01 14:17:11 Brandon

謝謝你的幫助的孩子的路線。它向我顯示了URL中的ID，並將此錯誤消息發送給我：bundle.js：28479警告：路徑必須是路徑名+搜索+散列而不是完全限定的URL，例如「http://www.imdb.com/標題/ tt0372784" – DenisMasot

在你Movies.js文件，更改此

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

到

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

因爲你Details.js是搜索

來源

2016-08-04 06:40:24 Deadfish

警告：[react-router]位置「」與任何路線不匹配

回答

相關問題