Question

我已经构建了一个显示电影列表的移动应用。它现在是静止的。我想实现一个路由的反应路由器。我想要的是当用户点击列表中的电视节目时，他/她应该被引导到该电视节目的详细页面。不在列表包含的同一页面（布局）上。我试着这样做但是当我点击电视节目的标题时，我无处可去。我怎么能这样做呢？代码可以帮助专家知道我想要什么以及我做错了什么。

这是我的代码第一个

Index.js

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App} >
      <Route component={DetailLayout}>
        <Route name="flash" path="/flash" component={Flash} />
      </Route>
    </Route>
  </Router>
), document.getElementById('root'));

MovieListItem.js（由App.js呈现）

const MovieListItem = ({movie}) => {
  const imageUrl = movie.imageUrl;
  const mainCastJoin = _.join(movie.mainCast, ', ');
  return (<li className="list-group-item">
            <div className="video-list media">
              <div className="media-left">
                <img className="media-object" src={imageUrl} alt={movie.title} />
              </div>
              <div className="media-body">
                <div className="media-heading">
                  <Link to="flash"><h4 className="title">{movie.title}</h4></Link>
                </div>
                <div className="main-cast">
                  <ul id="cast-list">
                      <li className="list-item">
                        {mainCastJoin}...
                      </li>
                  </ul>
                </div>
                <div className="reviewer">
                  <img className="img-responsive reviewer-img" src={imdb} alt="{movie.title}" />
                  <div className="imdbScore">
                    {movie.imdb}
                  </div>
                  <img className="img-responsive reviewer-img" src={rottenTomatoes} alt="{movie.title}" />
                  <div style={{verticalAlign:'middle', display:'inline'}} className="rottenTomatoesScore">
                    {movie.rottenTomatoes}
                  </div>
                </div>
              </div>
            </div>
        </li>
      )
};

export default MovieListItem;

Flash.js

import React, {Component} from 'react';

export default class Flash extends Component {
  render() {
    return (
      <div>Detail page of Flash will be shown here with different Layout as in second image i have attached</div>
    );
  }
}

DetailLayout.js

export default class DetailLayout extends Component {
  render() {
    return (
        <div>MyComponent</div>
      );
  }
}

点击电视节目的标题时，我想显示其布局完全不同的详细页面。

更新我不知道如何工作

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App} >
    </Route>
      <Route path="detail" component={DetailLayout}>
        <Route name="flash" path="/flash" component={Flash} />
      </Route>
  </Router>
), document.getElementById('root'));

在MovieListItem.js中如果我改变它可以工作。

Answer 1

您将flash路线设置为DetailLayout的孩子，但它只渲染MyComponent且没有孩子。只需在{this.props.children}中加入DetailLayout即可。

将MovieItemList中的链接设为<Link to="/flash>

React路由器搜索所有路由然后呈现它匹配的路由，因为我们在路由中添加了/flash，它找到flash作为/的子路由于这个原因有用。

您也可以使用detail/flash将闪存内的路由作为<Route name="flash" path="/detail/flash" component={Flash} />

处理来使其正常工作

export default class DetailLayout extends Component {
  render() {
    return (
        <div>
          <div>MyComponent</div>
          <div>{this.props.children}</div>
        </div>
      );
  }
}

路线

 ReactDOM.render((
      <Router history={browserHistory}>
        <Route path="/" component={App} >
          <Route name="detail" path="detail" component={DetailLayout}>
            <Route name="flash" path="/flash" component={Flash} />
          </Route>
        </Route>
      </Router>
    ), document.getElementById('root'));

MovieItem.js

 const MovieListItem = ({movie}) => {

  const imageUrl = movie.imageUrl;
  const mainCastJoin = _.join(movie.mainCast, ', ');
  return (<li className="list-group-item">
            <div className="video-list media">
              <div className="media-left">
                <img className="media-object" src={imageUrl} alt={movie.title} />
              </div>
              <div className="media-body">
                <div className="media-heading">
                  <Link to="flash"><h4 className="title">{movie.title}</h4></Link>
                </div>
                <div className="main-cast">
                  <ul id="cast-list">
                      <li className="list-item">
                        {mainCastJoin}...
                      </li>
                  </ul>
                </div>
                <div className="reviewer">
                  <img className="img-responsive reviewer-img" src={imdb} alt="{movie.title}" />
                  <div className="imdbScore">
                    {movie.imdb}
                  </div>
                  <img className="img-responsive reviewer-img" src={rottenTomatoes} alt="{movie.title}" />
                  <div style={{verticalAlign:'middle', display:'inline'}} className="rottenTomatoesScore">
                    {movie.rottenTomatoes}
                  </div>
                </div>
              </div>
            </div>
        </li>
      )
};

export default MovieListItem;

用反应路由器显示完整的新页面

1 个答案: