react 路由拦截通过tocken进行简单拦截

//router.js

import React from 'react'

import { Route, Switch } from 'react-router-dom';

import Page1 from './pages/page1';

import Page2 from './pages/page2';

import Page3 from './pages/page3';

import Page4 from './pages/page4';

import InnerPage from './pages/InnerPage';

function isAuth(){

var tocken = localStorage.getItem('tocken')

if(tocken) return true

return false

}

export default function Router() {

return (

<Switch>

<Route path="/Page1" component={Page1}></Route>

<Route path="/Page2" render={()=>

{return isAuth()? <Page2></Page2>:<Page3></Page3>}

}></Route>

<Route path="/Page3" component={Page3}></Route>

<Route path="/Page4" component={Page4}></Route>

{/* <Route path="/InnerPage/:id" component={InnerPage}></Route> */}

<Route path="/InnerPage" component={InnerPage}></Route>

{/* <Redirect from="/" to="/Page4" /> */}

</Switch>

)

}

//page3.js

import { useHistory } from "react-router-dom"

function Page3() {

const history = useHistory()

const login=()=>{

localStorage.setItem('tocken','wwww')

history.push(`/Page1/`)

}

return (

<div>

<button onClick={login}>login</button>

</div>

);

}

export default Page3;

//app.js

import './App.css';

// import Clock2 from './components01/b.js'

// import Name from './components02/a';

//import Clock3 from './components01/c.js'

// import Name from './components02/a'

// import Clock6 from './components01/e.js'

// import HCom from './components01/h.js'

// import SwiperCom from './components01/swiper'

//import Bcom from './components02/b'

// import Ccom from './components02/c'

// import Dcom from './components02/d'

// import Jcom from './components02/j'

// import Fcom from './components02/f'

// import UseReducer from './components02/UseReducer'

 

import {Link,HashRouter,NavLink } from 'react-router-dom';

import Router from './router';

function App() {

 

return (

<HashRouter>

<div className="App" >

<ul className='ul-tab'>

<li><Link to='/Page1'>Page1</Link></li>

<li><Link to='/Page2'>Page2</Link></li>

<li><Link to='/Page3'>Page3</Link></li>

<li><NavLink to='/Page4'>Page4</NavLink></li>

</ul>

</div>

<Router></Router>

</HashRouter>

);

}

export default App;