2016-04-22 174 views
0

我是新來做出反應,我試圖做一個簡單的練習,顯示藝術家列表,每個項目鏈接到藝術家頁面,其中包含藝術家的專輯,他們每個人指向包含歌曲列表的專輯頁面的鏈接。反應路由器 - 路由內部路由不工作

我遇到了路由問題,我設法從藝術家名稱鏈接到它的頁面,但是如果我點擊相冊,我看到url更改但內容保持不變。

我的文件:

app.jsx:

import React from 'react' 
import { Link } from 'react-router'; 

export default class App extends React.Component { 

    render() { 
    return (<div> 
     {this.props.children} 
    </div>) 
    } 
} 

artists.jsx:

import React from 'react'; 
import { Link } from 'react-router'; 

import { getArtists } from '../stores/artists-store'; 

export default class Artists extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      artists: getArtists() 
     }; 
    } 
    render() { 
     return (<div> 
      <h1>Artists</h1> 
      {this.state.artists.map((artist) => 
       <div key={artist.id}> 
        <Link to={'artists/' + artist.id}> 
         {artist.name} 
        </Link> 
       </div> 
      )} 
     </div>); 
    } 
} 

artist.jsx:

import React from 'react'; 
import { Link } from 'react-router'; 

import { getArtistById } from '../stores/artists-store'; 

export default class Artist extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      artist: getArtistById(this.props.params.id) 
     }; 
    } 
    render() { 
     return (
      <div> 
       <h2>{this.state.artist.name}</h2> 
       {this.state.artist.albums.map((album) => 
        <div key={album.id}> 
         <Link to={'albums/' + album.id}> 
          {album.name} 
         </Link> 
        </div> 
       )} 
      </div> 
     ); 
    } 
} 

album.jsx:

import React from 'react' 

import Song from './song'; 
import { getAlbumById } from '../stores/artists-store'; 

export default class Album extends React.Component { 
    constructor(props) { 
     debugger; 
     super(props); 
     this.state = { 
      album: getAlbumById(this.props.params.id) 
     }; 
    } 

    render() { 
     return (
      <div> 
       <h3>{this.state.album.name}</h3> 
       {this.state.album.songs.map((song) => <Song key={song.id} name={song.name}/>)} 
      </div> 
     ) 
    } 
} 

song.jsx:

import React from 'react' 

export default class Song extends React.Component { 
    render() { 
     return <div>this.props.name</div> 
    } 
} 

藝術家-store.js其中包含的數據:

export let artists = [ 
    { id: 1, 
    name: 'Imagine Dragons', 
    albums: [ 
     { id: 1, 
     name: 'Night Visions', 
     songs: [ 
      { id: 1, name: 'Radioactive'} 
     ]}, 
     { id: 2, 
     name: 'Smoke + Mirrors', 
     songs: [ 
      { id: 2, Name: 'Shots'} 
     ]} 
    ]}, 
    { id: 2, 
    name: 'Bastille', 
    albums: [ 
     { id: 3, 
     name: 'All This Bad Blood', 
     songs: [ 
      { id: 3, name: 'Pompeii'} 
     ]} 
    ]} 
]; 

export let nextArtistId: 3; 
export let nextAlbumId : 4; 
export let nextSongId : 4; 

export function getArtists() { return artists } 

export function getNextArtistId() { return nextArtistId } 

export function getNextAlbumId() { return nextAlbumId } 

export function getNextSongId() { return nextSongId } 

export function getArtistById(id) { 
    let artist = artists.filter((current) =>{ 
    if (current.id == id) 
     return current; 
    }); 

    return artist[0]; 
} 

export function getAlbumById(id) { 
    let album = artists.map((artist) => 
     artist.albums.filter((album) => { 
      if (album.id == id) { 
       return album; 
      } 
     }) 
    ); 

    return album; 
} 

export function addArtist(artistName) { 
    artists.push({id: nextArtistId, name: artistName}); 
    nextArtistId++; 
}; 

main.js:

import React from 'react'; 
import {render} from 'react-dom'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

import App from './Components/app'; 
import Artists from './Components/artists'; 
import Artist from './Components/artist'; 
import Album from './Components/album'; 

render(
    <Router history={browserHistory}> 
     <Route path='/' component={App}> 
      <IndexRoute component={Artists}/> 
      <Route path='artists/:id' component={Artist}> 
       <Route path='/albums/:id' component={Album}/> 
      </Route> 
     </Route> 
    </Router>, document.getElementById('app')); 

的index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Hello</title> 
    </head> 
    <body> 
    <div id='app'></div> 
    <script src="bundle.js"></script> 
    </body> 
</html> 

我認爲它與路由有關,但我無法弄清楚它是什麼。

回答

1

這是因爲/專輯/:id爲藝術家/的嵌套的路線:ID,你有兩個選擇

A)改變這樣

<Route path='artists/:id' component={Artist}/> 
<Route path='albums/:id' component={Album}/> 

B中的路由)保持你的路線一樣你現在得到了它們,並且在你的藝術家組件中包含了{this.props.children},因爲你的專輯組件是一個嵌套路線。

import React from 'react'; 
import { Link } from 'react-router'; 

import { getArtistById } from '../stores/artists-store'; 

    export default class Artist extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       artist: getArtistById(this.props.params.id) 
      }; 
     } 
     render() { 
      return (
       <div> 
        <div className="albums">{this.props.children}</div> 
        <h2>{this.state.artist.name}</h2> 
        {this.state.artist.albums.map((album) => 
         <div key={album.id}> 
          <Link to={'albums/' + album.id}> 
           {album.name} 
          </Link> 
         </div> 
        )} 
       </div> 
      ); 
     } 
    } 
+0

讓感覺,感謝路由對我來說更清晰 – Pachu