Reactjs单页应用程序-导航到链接时未加载组件

Question

我创建了电影和视频的单页应用程序。此 Web 应用程序有 4 个链接，可显示不同类型的视频和电影。例如，“儿童”链接显示儿童视频，“体育”链接显示体育视频等。根据链接名称，我正在调用 API 以在该页面上加载数据。但是在点击链接时，这并没有发生。下面是代码

// Root.js

class Root extends Component {

    constructor(props) {

        super(props);

        this.state = {

            items: [],

            isLoaded: false,

        }

    }

    componentDidMount() {

        let currentPath = this.props.match.path;

        var apiUrl = "";

        if (currentPath == "/movies") {

            apiUrl = "zzzzzzzzz";

        } else if (currentPath == "/kids") {

            apiUrl = "yyyyyyyyy";

        } else if (currentPath == "/sports") {

            apiUrl = "xxxxxxxx";

        }

        fetch(apiUrl)

                .then(res => res.json())

                .then(json => {

                    this.setState({

                        items: json,

                        isLoaded: true

                    });

                })

    }

    render() {

        var { items, isLoaded } = this.state;

        return (

        <div className="Root" >

            <HeaderNav />

            <Main items={items} />

            <Footer />

        </div>

        );

    }

}

export default Root;

// App.js

class App extends Component {

  render() {

    return (

      <Router>

        <Switch>

          <Route path="/" exact component={Root} />

          <Route path="/movies" exact component={Root} />

          <Route path="/kids" exact component={Root} />

          <Route path="/" render={() => <h2>  404 Not Found</h2>} />

        </Switch>

      </Router>

    );

  }

}

Answer 1

在这里分享我的发现&nbsp; &nbsp; // MenuComponent.js&nbsp; &nbsp; import React, {Component} from 'react';&nbsp; &nbsp; import Root from './Root';&nbsp; &nbsp; class Kids extends Component {&nbsp; &nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Root text="kids"&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; class Movies extends Component {&nbsp; &nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Root text="movies"&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; class Sports extends Component {&nbsp; &nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Root text="sports"&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; export { Kids, Movies, Sports };添加了一个新的组件类，其中包含所有菜单的类&nbsp; &nbsp; //Updated App.js&nbsp; &nbsp; import React, {Component} from 'react';&nbsp; &nbsp; import './css/main.css';&nbsp; &nbsp; import './css/bootstrap/css/bootstrap.min.css';&nbsp; &nbsp; import Root from "./Components/Root"&nbsp; &nbsp; import { Kids, Movies, Sports } from "./Components/MenuComponents"&nbsp; &nbsp; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";&nbsp; &nbsp; class App extends Component {&nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path='/movies' exact component={Movies} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path='/sports' exact component={Sports} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path='/kids' exact component={Kids}&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path="/" exact component={Root} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path="/*" render={() => <h2>&nbsp; 404 Not Found</h2>} />*/}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Router>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; export default App;然后我在 Route 组件中调用上面的菜单组件类。MenuComponent.js 中的类间接调用“根”组件。通过这种方式，我可以确保组件的可重用性这对我来说非常有效。如果我们想添加新菜单，请在 MenuComponent.js 中添加一个类并为菜单添加一个 Route

Answer 2

您的 if/else 块并不详尽，您确定 currentPath 不是未定义的吗？尝试console.log(currentPath)在条件之后。如果可行，则尝试console.log(json)在 this.setState() 之前，以确保 json 结果是预期的。最后，您确定items以列表的形式返回吗？