布局图片如下所示：
可见项的的布局：
分为两大类：1、home页面里，还有路由跳转；2、cityle页面里没有路由跳转了

总的：

// import { Button } from 'antd-mobile';
import {
    
     BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import CityList from "./pages/CityList";
function App() {
    
    
  return (
    <Router>
      <div className="App">
        <Link to="/home">首页</Link>
        <Link to="/citylist">城市选择</Link>
        <Route path="/home" component={
    
    Home}></Route>
        <Route path="/citylist" component={
    
    CityList}></Route>
      </div>
    </Router>
  );
}
export default App;

cityle页面：

import React from 'react';
class CityList extends React.Component {
    
    
  render() {
    
    
      return (<div>这是citylist组件</div>)
  }
}
export default  CityList;

home页面：

import React from 'react';
import {
    
     Route } from "react-router-dom";
import News from '../News/index';
class Home extends React.Component {
    
    
    render() {
    
    
        return (<div>
            <div>这是home组件</div>
            <Route path="/home/news" component={
    
    News}></Route>
        </div>)
    }
  }
  export default  Home;

home页面里的路由出口：

import React from "react";
class News extends React.Component {
    
    
    render() {
    
    
        return (<div>这是news组件</div>)
    }
  }
  export default  News;

父路由展示了 子路由才可能被展示

又因为pathname和path的模糊匹配规则，所以当页面是 /home/news时 /home也必然会被匹配到

使用步骤：

1. 在 pages 文件夹中创建 News/index.js组件
2. 在 Home 组件中，添加一个Route 作为子路由（嵌套的路由）的出口
3. 设置嵌套路由的path，格式以父路由 path 开头（父组件展示，子组件才会展示）
4. 修改 pathname 为 /home/news，News 组件的内容就会展示在Home 组件中

<Router> <div> <Route path="/home" component={
    
    Home} /> </div> </Router>


const Home = () => ( <div> <Route path="/home/news" component={
    
    News} /> </div> )