react入门七

react路由：

• 路由模式组件：BrowserRouter（history模式路由）/ HashRouter（hash模式路由）顶层标签，所有路由组件在其内部
• 导航链接组件：NavLink 导航使用在涉及到高亮激活 <NavLink to = '/地址' exact></NavLink> exact表示严格匹配
• 普通链接组件 Link 普通的跳转标签 <Link to = '/地址'></Link>
• 路由映射组件 Route 建立组件和地址之间的关系 path = "/地址" component = {组件} exact严格匹配
• ==>优先级 低 <Route path = "/地址" component = {组件}></Route>
• ==>优先级 高 <Route path = "/地址"><组件/></Route>
• ==> <Route path = "/地址" render= {(props) =><组件 {...props} />}></Route>
• 匹配跳出组件Switch 从上往下匹配，匹配到了就跳出，不继续匹配
• 重定向组件 Redirect  <Redirect  to = "/地址" />

注意：

• 有嵌套路由，上级路由映射不能加严格模式
• 404应放在最后
• 一旦组件变成了页面组件，name该组件props里面就会有history、location、match三个对象
• withRouter(组件) 返回新组件（新组件里面就会携带路由相关信息）
• props.history //提供了很多方法可以实现跳转
• ==>go、goback、goForward、push、replace
• useParams //获取动态路由数据
• useHistory //获取history对象

定义一个权限组件
const AuthRoute = (props) =>{
  if(localStorage.getItem('USER-TOKEN')) {
  return <Route {...props} {props.children}></Route>  
  } else {
    return <Redirect to = "/login"/>
   }
}

==========================================================
简写
const AuthRoute = ({component:Component,...rest})=>{
  const token = localStorage.getItem('USER-TOKEN')
  return <Route {...rest} render={()=>token?<Component/>:<Redirect to='/login'/>}></Route>
}

import React, { Component } from 'react'
import './App.css'
import { HashRouter, NavLink, Route, Switch, Redirect } from 'react-router-dom'
//路由懒加载
const Home = React.lazy(() => import('./views/Home'))
const News = React.lazy(() => import('./views/News'))
const Product = React.lazy(() => import('./views/Product'))
const User = React.lazy(() => import('./views/User'))
const NewsDetail = React.lazy(() => import('./views/News/detail'))
const ProductDetail = React.lazy(() => import('./views/Product/detail'))
const NotFound = React.lazy(() => import('./views/NotFound'))
const Login = React.lazy(() => import('./views/Login'))
// import Home from './views/Home'
// import News from './views/News'
// import Product from './views/Product'
// import User from './views/User'
// import NewsDetail from './views/News/detail'
// import ProductDetail from './views/Product/detail'
// import NotFound from './views/NotFound'
const AuthRoute = ({component:Component,...rest})=>{
  const token = localStorage.getItem('USER-TOKEN')
  return <Route {...rest} render={()=>token?<Component/>:<Redirect to='/login'/>}></Route>
}
const App = () => {
    return (
        <HashRouter>
          <React.Suspense fallback={<h2>加载中</h2>}>
            <div id="app">
                <div className="header">
                    <div className="logo">这是Logo</div>
                    <ul>
                        <li>
                            {' '}
                            <NavLink to="/" exact>
                                首页
                            </NavLink>{' '}
                        </li>
                        <li>
                            {' '}
                            <NavLink to="/news">公司新闻</NavLink>{' '}
                        </li>
                        <li>
                            {' '}
                            <NavLink to="/product">公司产品</NavLink>{' '}
                        </li>
                        <li>
                            {' '}
                            <NavLink to="/user">用户中心</NavLink>{' '}
                        </li>
                    </ul>
                </div>
                <div className="container">
                    {/* 中间页面内容展示区域 */}
                    <Switch>
                        <Route path="/" exact component={Home}></Route>
                        <Route path="/login" exact component={Login}></Route>
                        <Route path="/news" exact component={News}></Route>
                        <Route path="/news/:id" component={NewsDetail}></Route>
                        <Route path="/product" exact component={Product}></Route>
                        <Route
                            path="/product/detail"
                            render={(props) => <ProductDetail {...props} />}
                        ></Route>
                        <AuthRoute path="/user" component={User}></AuthRoute>
                        <Route path="/404" component={NotFound}></Route>
                        <Route path="/*">
                            <Redirect to="/404" />
                        </Route>
                    </Switch>
                </div>
                <div className="footer">这是底部信息</div>
            </div>
          </React.Suspense>  
        </HashRouter>
    )
}

export default App

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

import UserIndex from './welcome'
import UserInfo from './info'
import UserOrder from './order'
const User = () => {
  return (
    <div className="user">
        <ul className="menu">
            <li> <NavLink to="/user/info">我的资料</NavLink></li>
            <li> <NavLink to="/user/order">我的订单</NavLink></li>
        </ul>
        <div className="main">
            <div className="pos">
                <span>xx，欢迎您！<button>退出</button></span>
                <p>当前位置：xxx&gt;xxxx&gt;xxx</p>
            </div>
            <div className="content">
             {/* 二级页面展示区域 */}
             <Switch>
               <Route path='/user/' exact component={UserIndex}></Route>
               <Route path='/user/info' exact component={UserInfo}></Route>
               <Route path='/user/order' exact component={UserOrder}></Route>
             </Switch>
            </div>
        </div>
    </div>
  )
}

export default User