Question

我是新手做出反应，我正在尝试做一个简单的练习，显示每个项目链接到艺术家页面的艺术家列表，其中包含艺术家的专辑，每个专辑都链接到包含a的专辑页面歌曲列表。

我遇到路由问题，我设法从艺术家名称链接到其页面，但如果我点击相册，我会看到网址发生变化，但内容保持不变。

我的档案：

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>
    }
}

artists-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>

我认为它与路由有关，但我无法弄清楚它是什么。

Answer 1

这是因为/ albums /：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>
            );
        }
    }

反应路由器 - 路由内的路由不起作用

1 个答案: