警告：[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]位置“”与任何路线不匹配

回答

相关问题