react从入门到精通5

路由

作用：实现单页面导航

安装

npm i react-router-dom@5.0 -s

简单路由

页面效果

// 导入路由相关组件   导入哈希路由 别名router   
// Route路由页面   属性  exact 精确匹（路径和配置的path完全匹配）  path 路由地址   component 组件
// NavLink 导航链接   属性 exact 精确匹配   to 链接地址   class="active" 匹配状态
import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'
function App(params) {
  return (<Router>
    {/* 导航 */}
    <div>
      <NavLink to="/" exact>首页</NavLink>|
      <NavLink to="/about" exact>关于</NavLink>|
    </div>
    {/* 路由页面 */}
    <Route path="/" exact component={Home}></Route>
    <Route path="/about" exact component={About}></Route>
  </Router>
  )
}
export default App;
function Home(params) {
  return <div>首页页面</div>
}
function About(params) {
  return <div>关于页面</div>
}

带参路由

页面效果

// props
   // match     匹配的路由      params 路由的参数 	url 地址                  
   // history   历史记录    	   push 跳转          replace 替换历史记录   goBack 返回
   // location  地址栏信息      search 查询信息 	 state跳转传入数据
   // 只有 Route 对应的component才有这三个自动注入参数
//路由的参数
	//path="produce/:id”
	//切换 to=“/produce/abc”
	//获取：props.match.params.id
//导航
        <NavLink to="/produce/abc" exact>产品abc</NavLink>|
        <NavLink to="/produce/123" exact>产品123</NavLink>|
//页面
        <Route path="/produce/:id" exact component={Produce}></Route>

// function Produce(props) {
//     return (
//         <div>
//             <h1>产品{props.match.params.id}</h1>
//         </div>
//     )
// }
function Produce({ match, history }) {
  console.log("match", match);
  console.log("history", history);
  return (<div>
      <div>产品{match.params.id}</div>
      <button onClick={() => history.goBack()} >返回</button>
      <button onClick={() => history.push('/')} >返回首页</button>
    </div>
  )
}

子路由

页面效果

//Redirect 重定向   to 去哪儿   from 从那	
//导航
  <NavLink to='/admin' >管理</NavLink>  |
//页面
  <Route path="/admin" component={Admin}></Route>
  
function Admin() {
  return (<div style={{ "display": "flex" }}>
    <div style={{ width: "200px", borderRight: "1px solid #f0f0f0" }}>
      <NavLink to="/admin/dash">概览</NavLink> <br />
      <NavLink to="/admin/orderlist">列表</NavLink>
    </div>
    <div>
      <Route path="/admin/dash" component={Dash}></Route>
      <Route path="/admin/orderlist" component={OrderList}></Route>
      {/* 重定向 */}
      <Redirect path="/admin" to="/admin/dash"></Redirect>
    </div>
  </div>)
}
function Dash() {
  return (<div>概览</div>)
}
function OrderList() {
  return (<div>订单列表</div>)
}

404页面

页面效果

//Switch 包裹所有路由页面，同时只执行一个页面，这样防止404和其他页面同时出现
//path="*" 所有页面    404页面路由配置放在最后面
//页面
<Switch>
  <Route path="*" component={NoMatch}></Route>
</Switch>
 
function NoMatch({ location, history }) {
  return (<div>
    <h1>404</h1>
    <p>页面被外星人抓走了</p>
    <p>{location.pathname}</p>
    <button onClick={history.goBack}>后退</button>
    <NavLink to={{ pathname: "/" }}>首页</NavLink>
  </div>)
}

Prompt 离开提示

页面效果

//Prompt 路由离开调用弹框
//	     when 当条件为真
//	     message 弹出文本内容
function About() {
  return <div>
    关于页面
    <Prompt message="你确定要离开"></Prompt>
  </div>
}

登录页面

页面效果

//路由页面
   <Route path="/login" component={Login}></Route>
//需要登录页面
 <Link to={{ pathname: "/login", state: { redirect: match.url } }}>登录</Link>
//需要登录页面
 <Link to={{ pathname: "/login", search: "name=mumu&age18", state: { redirect: "/about" } }}>登录</Link>


function Login({ history, location }) {
  var goBack = e => {
    // 获取上一个页面传入参数state 
    // var redirect = location?.state?.redirect || "/"
    var redirect = location.state && location.state.redirect || "/"
    localStorage.setItem("isLog", "true")
    // 登录成跳转对应的页面
    history.replace(redirect);
  }
  return <div>
    <h1>登录</h1>
    <button onClick={goBack}>登录确定</button>
  </div>
}