React二级路由

A.js

import React, {Component} from 'react';

class A extends Component {
    render() {
        return (
            <div>
                这是A的内容！！！！！！！！
            </div>
        );
    }
}

export default A;

B.js

import React, { Component } from 'react';
import { Link, Route ,Switch} from "react-router-dom";
import B1 from "./B1";
import B2 from "./B2";
class B extends Component {
    render() {
        return (
            <div>
                <h2>我是B的内容</h2>
                <div>
                    <ul>
                        <li>
                            <Link to="/B/B1">B1</Link>
                        </li>
                        <li>
                            <Link to="/B/B2">B2</Link>
                        </li>
                    </ul>
                </div>
                <div>
                    <Switch>
                        <Route path="/B/B1" component={B1} />
                        <Route path="/B/B2" component={B2} />
                    </Switch>
                </div>
            </div>
        );
    }
}

export default B;

B1.js

import React, {Component} from 'react';

class B1 extends Component {
    render() {
        return (
            <div>
                <h3>这里是B1的列表！</h3>
                <ul>
                    <li>
                        B1.1
                    </li>
                </ul>
            </div>

        );
    }
}

export default B1;

B2.js

import React, {Component} from 'react';

class B2 extends Component {
    render() {
        return (
            <div>
                <h3>这里是B2的内容！！</h3>
                <ul>
                    <li>
                        B2.1
                    </li>
                </ul>
            </div>
        );
    }
}

export default B2;

App.js

import React, { Component } from 'react';
import {BrowserRouter, Route, Link} from "react-router-dom";
import A from "./A";
import dataPage from "./B";

class App extends Component {
  render() {
    return (
        <BrowserRouter>
          <h2>React路由的使用</h2>
          <div className="content">
            <ul>
              <li>
                <Link to="/A">A</Link>
              </li>
              <li>
                <Link to="/B">B</Link>
              </li>
            </ul>
          </div>
          <div>
            <Route path="/A" component={A} />
            <Route path="/B" component={dataPage} />
          </div>
        </BrowserRouter>
    );
  }
}
export default App;