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>
我認爲它與路由有關,但我無法弄清楚它是什麼。
讓感覺,感謝路由對我來說更清晰 – Pachu