display complete new page with react router

Question

I have build a mobile app which shows a list of movies. Its a static for now. I want to implement a react router for routing. What i want is when user clicks on the TV Shows from the list, he/she should be directed to the detail page of that TV Show. Not on the same page(layout) where list contains. I tried to do that but when i click on the title of the TV Show i am directed nowhere. How can i do that so?The code might help for expert to know what i am wanting and where i am doing wrong.

Here is my code first

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(rendered by 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>
      );
  }
}

When title of TV Show is clicked, i want to show its detail page which has completely different layout.

UPDATE I dont know how but this works

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'));

In MovieListItem.js if i change to it works.

Answer 1

You are setting your flash route as a child of DetailLayout but it renders only MyComponent and has no children. Just include {this.props.children} in DetailLayout.

Set link in your MovieItemList as <Link to="/flash>

React router searches for all the routes and then renders the route it matches,and since we have added a /flash in the route it finds flash as child of / thats the reason it works.

You can also make it work by using detail/flash by handling the route inside flash as <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>
      );
  }
}

Route

 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;