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

Question

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

在这里分享我的发现

    // MenuComponent.js

    import React, {Component} from 'react';

    import Root from './Root';

    class Kids extends Component {

        render() {

            return (

                <Root text="kids"  />

            );

        }

    }

    class Movies extends Component {

        render() {

            return (

                <Root text="movies"  />

            );

        }

    }

    class Sports extends Component {

        render() {

            return (

                <Root text="sports"  />

            );

        }

    }

    export { Kids, Movies, Sports };

添加了一个新的组件类，其中包含所有菜单的类

    //Updated App.js

    import React, {Component} from 'react';

    import './css/main.css';

    import './css/bootstrap/css/bootstrap.min.css';

    import Root from "./Components/Root"

    import { Kids, Movies, Sports } from "./Components/MenuComponents"

    import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

    class App extends Component {

      render() {

        return (

          <Router>

            <Switch>

              <Route path='/movies' exact component={Movies} />

              <Route path='/sports' exact component={Sports} />

              <Route path='/kids' exact component={Kids}  />

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

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

            </Switch>

          </Router>

        );

      }

    }

    export default App;

然后我在 Route 组件中调用上面的菜单组件类。MenuComponent.js 中的类间接调用“根”组件。通过这种方式，我可以确保组件的可重用性

这对我来说非常有效。如果我们想添加新菜单，请在 MenuComponent.js 中添加一个类并为菜单添加一个 Route

Answer 2

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