我不能换页

I can not change page

本文关键字:换页 不能      更新时间:2023-09-26

我想从Movie.js页面转到Details.js.页面

url中有电影的好id,但什么也没发生:"http://localhost:8100/search/tt0372784"

我无法解释此错误:未捕获的语法错误:意外的令牌<

main.js:

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Routes.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='/search/:myLink' handler={Details}/>
            </Route>
        </Router>
    )
  }
});

电影.js:

var Movie = React.createClass({
    render: function(){
        var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;
        var myLink = 'search/' + this.props.movie.imdbID;
        return(
            <div className="well">
                <div className="row">
                    <h4 className="text-center">
                        <Link to={myLink} activeClassName="current">{this.props.movie.Title}</Link>
                    </h4>
                </div>

            </div>    
        )
    },
});

Details.js:

var Details = React.createClass({
    render: function(){
        var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;
        var title = this.props.movie.Title;
        var year = this.props.movie.Year;
        var type = this.props.movie.Type;
        var poster = this.props.movie.Poster;
        var imdbID = this.props.movie.imdbID;
        return(
            <div className="well">
                <div className="row">
                    <div className="col-md-4">
                        <img className="thumbnail" src={poster} /> 
                    </div>
                    <div className="col-md-8">
                        <h4><a href={this.props.movie.Title}> {title}</a></h4>
                        <ul className="padding">
                            <li className="list-group-item">Type : {type}</li>
                            <li className="list-group-item">Year Released : {year}</li>
                            <li className="list-group-item">Id imdb : {imdbID}</li>
                        </ul>
                        <a className="btn btn-primary" href={link}>View on IMDB</a>
                    </div>
                </div>
                <Movie movie={this.props.Details} key={i} />
            </div>    
        )
    },
});

您的路线配置中有一个错误

<Route path='/search' component={Search}>
     <Route path='/search/:myLink' handler={Details}/>
</Route>

此配置将与"search/search/tt0327784"而不是"search/tt0327984"匹配