父路由

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

import React from "react";

import {HashRouter,Route, Switch,Redirect} from 'react-router-dom'
import Login from "../views/Login/Login";
import Error404 from "../views/Error/Error404";
import FirstPage from "../views/FirstPage/firstPage";
import reduxExample from "../views/ReduxExample/reduxExample";
import LifeCycleExample from "../views/LifeCycle/lifeCycleExample";
export default function IndexRouter() {
  const f1 = ()=>{
    alert("请登录")
  }
  function PermissionExample() {
    if(localStorage.getItem('tokenX')) {
      //如果有 token 或者判断 可以的话，就返回 firstPage
      return <FirstPage />
    }
     
    // alert("没有登录")
    return <div>
         {console.log("hello wolrd")}
         {alert("对不起，你没有这个权限")}
         {f1()}
      <div>
        请登录----
      </div>
    </div>

  }
  
  return (
      <div>
        <HashRouter  >
          <Switch>
              <Route path="/login" exact component={Login}/>
              
              
              <Route path="/404" exact component={Error404}/>

              <Route  path="/backend" component={FirstPage}  />
             
              <Route path="/test" exact component={reduxExample} />
              <Route
                path="/" exact
                component={FirstPage}
              />

              
            
          </Switch>
        </HashRouter>
        <HashRouter  >
          <Switch>
            <Route path="/myadmin" exact component={()=> <div>对不起，你没有管理员权限</div>}/>
            <Route path="/myadmin2" exact component={()=> PermissionExample()}/>
          </Switch>
        </HashRouter>
        <HashRouter  >
          <Switch>
            <Route path="/admin3" exact component={()=> <div>这个版本3</div>}/>
            <Route path="/admin3/test" exact component={()=> localStorage.getItem("token")? <div>token:{localStorage.getItem('token')}</div>:<div>你没有token admin3</div>}/>
            <Route path="/lifeCycle"  component={LifeCycleExample} />
          </Switch>
        </HashRouter>
      </div>
  )
}

子路由

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

import React, { useEffect, useState } from "react";
import { HashRouter as Router,Route ,Switch} from "react-router-dom";
import { Link } from "react-router-dom";
function Child1() {
  return (
    <div>
      <h2>
        hello world child1
      </h2>
    </div>
  )
}
function Child2() {
  return (
    <div>
      <h2>
        child2
      </h2>
    </div>
  )
}


export default function LifeCycleExample() {
  const [cnt , setCnt] = useState(0)
  useEffect(()=>{
    //useEffect 不影响视图更新，异步延迟执行，不是同步的
    console.log(`component did update, UI 更新了 , cnt := ${cnt}`)
  })

  return (
    <div>
      
      <Router >
        <button onClick={()=>setCnt(cnt+1)}>
          点击 {cnt}
        </button>
        11
        <br />
        <Link to="./" >child1</Link>
        <br />
        <Link to="child2" >child2</Link>
        <Switch>
          <Route path="/LifeCycle/child2" exact component={Child2} />
          <Route path="/LifeCycle/child1" exact component={Child1} />
          <Route path="/LifeCycle/" exact component={Child1} />
        </Switch>
        
      </Router>
    </div>
  )
}