React-router在嵌套组件中加载组件

React-router是一个用于构建单页面应用的路由库，它可以帮助我们实现页面之间的跳转和组件的加载。在React应用中，我们可以使用React-router来管理不同页面的路由，并根据路由的变化加载相应的组件。

在嵌套组件中加载组件是React-router的一个常见用法。通过React-router的嵌套路由功能，我们可以在一个父组件中定义多个子组件，并根据路由的变化动态加载对应的子组件。

具体实现方式如下：

首先，我们需要安装React-router库。可以使用npm或yarn命令进行安装：

npm install react-router-dom

在父组件中引入React-router的相关组件和方法：

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

在父组件的render方法中，使用Router组件包裹子组件，并定义路由规则：

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

在子组件中，可以通过Link组件来定义路由跳转的链接：

import { Link } from 'react-router-dom';

class Navbar extends React.Component {
  render() {
    return (
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
    );
  }
}