在React中实现嵌套异步路由获取

npm install react-router-dom

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

import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

import React, { useEffect, useState } from 'react';

const About = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 异步获取数据的逻辑
    fetchData()
      .then((response) => setData(response))
      .catch((error) => console.error(error));
  }, []);

  const fetchData = async () => {
    // 异步获取数据的实现
    const response = await fetch('https://api.example.com/about');
    const data = await response.json();
    return data;
  };

  return (
    <div>
      {data ? (
        <div>{data}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default About;