react（44）——嵌套路由Route的使用

1.示例代码

1. app的代码

import React, { Component } from "react";
import Div1 from "./components/div1";
import Div2 from "./components/div2";
import Page1 from "./pages/page1";
import Page2 from "./pages/page2";
import {
  Link,
  BrowserRouter,
  Route,
  NavLink,
  Switch,
  HashRouter,
  Redirect,
} from "react-router-dom";

export default class App extends Component {
  render() {
    return (
      <div>
        <HashRouter>
          <NavLink activeClassName="acc" to="/Page1">
            a
          </NavLink>
          <NavLink activeClassName="acc" to="/Page2">
            b
          </NavLink>

          <Switch>
            <Route path="/Page1" component={Page1} />
            <Route path="/Page2" component={Page2} />
            <Redirect to="/Page1" />
          </Switch>
        </HashRouter>
        <Div1>123456789/Div1</Div1>
      </div>
    );
  }
}

2. Page2的代码

import React, { Component } from "react";
import { Route, Switch } from "react-router";
import { NavLink } from "react-router-dom";
import Div1 from "../components/div1";
import Div2 from "../components/div2";

export default class Page2 extends Component {
  render() {
    return (
      <div>
        <NavLink activeClassName="acc" to="/Page2/Div1">
          Div1
        </NavLink>
        <NavLink activeClassName="acc" to="/Page2/Div2">
          Div2
        </NavLink>
        <Switch>
          <Route path="/Page2/Div1" component={Div1}></Route>
          <Route path="/Page2/Div2" component={Div2}></Route>
        </Switch>
      </div>
    );
  }
}

3. Div1和Div2的代码

import React, { Component } from "react";

export default class Div1 extends Component {
  render() {
    return (
      <div>Div1</div>
    );
  }
}


import React, { Component } from "react";

export default class Div2 extends Component {

  render() {
    return <div>Div2</div>;
  }
}

2.使用方式

1. 在一级路由中的的Route组件指向的组件之中编写二级路由，二级路由的路径需要在一级路由的基础上写，同理，三级路由需要在二级路由的基础上写。

<NavLink activeClassName="acc" to="/Page2/Div1">
  Div1
</NavLink>
<NavLink activeClassName="acc" to="/Page2/Div2">
  Div2
</NavLink>
<Switch>
  <Route path="/Page2/Div1" component={Div1}></Route>
  <Route path="/Page2/Div2" component={Div2}></Route>
</Switch>

3.运行结果