Question

当我路由到播放器组件时，我可以获得播放器的数据，但是当我单击链接标签时，PLayersContainer组件未打开。这是我的App.js文件。

import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Players from './Components/Players'
import PlayersContainer from './Components/Container/playersContainer'
import Navigation from './Components/Navigation';
export default class App extends Component {

    state = {

      players:[

        {
          id:1,
          name:'Ronaldo'
        },
        {
          id:2,
          name:'Messi'
        }

      ]
}


  render() {
    return (
      <Router>
          <Navigation />
          <Switch>
          <Route  path="/players" render={(props) => <Players {...props}  players={this.state.players} />} />
          <Route exact path="/players/:id" render={PlayersContainer} />
          </Switch>
    </Router>
    )
  }
}

这是我的播放器组件。

import React from 'react'
import { Link } from 'react-router-dom'
export default function Players(props) {

    const renderPlayers = () => {

        let players = props.players.map(playerObj => <li> <Link to={`/players/${playerObj.id}`}> Player {playerObj.name} </Link></li>)
        return players
    }
    return (
        <div>
            <ul>
            {renderPlayers()}
            </ul>
        </div>
    )
}

这是我的PlayersContainer组件，我要在其中呈现Player的各个数据。

import React from 'react'
import { Link } from 'react-router-dom'
export default function PlayersContainer(props) {


    const renderPlayers = () => {

        console.log(props);
    }
    return (
        <div>
            <ul>
            {renderPlayers()}
            </ul>
        </div>
    )

}

Answer 1

您将错误的Route标记为exact。以其当前编写方式，以/players开头的任何内容都将匹配第一条路线。由于处于切换状态，因此仅会显示第一个匹配项。

更改自：

<Route path="/players" render={(props) => <Players {...props}  players={this.state.players} />} />
<Route exact path="/players/:id" render={PlayersContainer} />

对此：

<Route exact path="/players" render={(props) => <Players {...props}  players={this.state.players} />} />
<Route path="/players/:id" render={PlayersContainer} />

现在只有/players会与第一条路线完全匹配，/players/id可以继续经过它以与第二条路线匹配。

组件未渲染-动态路由反应

1 个答案: