警告：[react-router] Location"" 不匹配任何路由答案

【问题标题】：Warning: [react-router] Location"" did not match any routes警告：[react-router] Location"" 不匹配任何路由
【发布时间】：2016-12-06 16:00:54
【问题描述】：

我是法国人，对不起，我不会说英语。

我也有类似的问题。我正在尝试使用 OMDB API 制作电影网站。我想在另一个页面上查看电影的详细信息。

我收到此错误消息：“警告：[react-router] 位置“Batman Begins”与任何路线都不匹配”

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;

电影.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;

【问题讨论】：

标签： reactjs react-router flux

【解决方案1】：

也许改变这一行：

<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>

【讨论】：

感谢您的帮助。它向我显示 URL 中的 ID 并向我显示以下错误消息：bundle.js:28479 警告：路径必须是路径名 + 搜索 + 哈希，而不是像“imdb.com/title/tt0372784”这样的完全限定 URL

【解决方案2】：

在您的 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 是 Search 的子路由

【讨论】：