Question

我是法国人，我会说英语很抱歉。

我有类似的问题。我正在尝试用OMDB API创建一个电影网站。我想在另一页上查看电影的细节。

我有此错误消息：“警告：[react-router]位置”蝙蝠侠开始“与任何路线都不匹配”

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

也许改变这一行：

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

Answer 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是搜索的子路线

警告：[react-router]位置“”与任何路由都不匹配

2 个答案: