react嵌套路由

index.jsx

import React, { Component } from 'react'

import {HashRouter as Router,Route,Switch,Redirect} from 'react-router-dom'

import Login from './Login'
import Layout from './Layout'
import NotFound from '../404'

export default class Index extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={Login}/>
                    <Route path="/layout" component={Layout}/>
                    <Redirect exact from="/" to="/login"/>

                    <Route component={NotFound} />
                </Switch>
            </Router>
        )
    }
}

login.jsx

import React, { Component } from "react";

const login = {
  height: "200px",
  width: "300px",
  margin: "100px auto",
  border: "1px solid rgba(92,92,92,0.3)",
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center"
};

class Login extends Component {
  login = () => {
      this.props.history.push('/layout')       ---------------编程式导航
  };

  render() {
    return (
      <div style={login}>
        <div>
          用户名:
          <input type="text" />
          <br />
        </div>
        <div>
          密码:
          <input type="password" />
          <br />
        </div>
        <button onClick={this.login}>登录</button>
      </div>
    );
  }
}

export default Login;

layout.jsx

import React, { Component } from "react";

import { Link, Route, Switch, Redirect } from "react-router-dom";

import "./Layout.css";                            ------------------------------外联css样式导入

import NotFound from '../404'

function Menu1() {                                ----------------------------- 函数式组件
  return <div style={{ color: "purple" }}>我是菜单1</div>;
}

function Menu2() {
  return (
    <div style={{ color: "hotpink" }}>
      <br />
      <br />
      我是菜单2
    </div>
  );
}

class Layout extends Component {
  render() {
    return (
      <div>
        <div className="layout">
          <div className="left">
            左边菜单
            <br />
            <br />
            <Link to="/layout/menu1">菜单1</Link>
            <br />
            <br />
            <Link to="/layout/menu2">菜单2</Link>
          </div>
          <div className="right">
            <div className="content">
              <Switch>
                <Route path="/layout/menu1" component={Menu1} />
                <Route path="/layout/menu2" component={Menu2} />

                <Redirect exact from="/layout/" to="/layout/menu2" />

                <Route component={NotFound}/>
              </Switch>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Layout;

此处route外面没有包裹router

layout.css

.layout{
    width: 600px;
    margin:100px auto;
}

.left{
    width:200px;
    height: 500px;
    float: left;
    border: 1px solid red;
}

.right{
    width:380px;
    height: 500px;
    float: right;
    border: 1px solid green;
}

.top{
    height: 100px;
    border: 1px solid black;
}