29.9React课程
第05节：react全家桶
(第5节：react全家桶&)
第5节：react全家桶&
App.js
exact精确匹配，可以使用switch独占如果有一个匹配不会继续往下走，一般要与exact配合使用，否则下面不会执行
fallback返回任意jsx语法，增加动态引入与懒加载实现
import React, { Suspense, lazy } from "react";
import logo from "./logo.svg";
import "./App.css";
import {
BrowserRouter as Router,
HashRouter,
Route,
Link,
Switch,
Redirect
} from "react-router-dom";
import ListTest from "./Pages/ListTest";
// import DetailTest from "./Pages/DetailTest";
const DetailTest = lazy(() => import("./Pages/DetailTest"));
function Index(props) {
console.log(props);
return 首页;
}
function Nav({ history, location }) {
console.log(history, location);
return 导航;
}
function Test404() {
return 404;
}
//实现加强版本的route
function UpRoute({ component: Component, isLogin, ...rest }) {
return (
{
return isLogin ? (
) : (
{ pathname: "/login" }} /
);
}}
>
);
}
function Login() {
return Login;
}
function Test(props) {
console.log(props);
return (
守卫内容
);
// return
// {
// props.isLogin ? Component : {pathname:"/login"}}/
// }
// ;
}
function App() {
return (
React-router
-
首页
-
菜单1
-
列表
-
详情
-
守卫测试
{/* 路由配置 */}
{/* 首页 /nav */}
{/* switch 一般都会和exact属性配合使用 */}
{/* 完全匹配 */}
{/* /list */}
{/* /list/react */}
{/* /list/vue */}
{/* /list/node */}
{/*
{" "}
*/}
);
}
export default App;
history是h5对象的api
import React, { Component } from "react";
function DetailTest({ history, location, match }) {
console.log(match, location);
return 宝贝ID:{match.params.id};
}
export default DetailTest;
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
function ReactPage() {
return ReactPage;
}
function VuePage() {
return VuePage;
}
function NodePage() {
return NodePage;
}
function ListTest() {
return (
ListTest
-
React
-
vue
-
node
{ border: "1px red solid" }}
动态路由要完全匹配，点击list进入ListTest去匹配，去加载子路由
有子路由并且是动态匹配，不能对一级路由设置exact
(404页面&)
404页面&
没有任何url匹配输出404，采用漏斗策略
(路由守卫&)
路由守卫&
...rest其他加强属性，小写component jsx不会当做一个组件，要重新起别名
重定向跳转回退不了，其他跳转可以回退。
import React, { Suspense, lazy } from "react";
import logo from "./logo.svg";
import "./App.css";
import {
BrowserRouter as Router,
HashRouter,
Route,
Link,
Switch,
Redirect
} from "react-router-dom";
import ListTest from "./Pages/ListTest";
// import DetailTest from "./Pages/DetailTest";
const DetailTest = lazy(() => import("./Pages/DetailTest"));
function Index(props) {
console.log(props);
return 首页;
}
function Nav({ history, location }) {
console.log(history, location);
return 导航;
}
function Test404() {
return 404;
}
//实现加强版本的route
function UpRoute({ component: Component, isLogin, ...rest }) {
return (
{
return isLogin ? (
) : (
{ pathname: "/login" }} /
);
}}
>
);
}
function Login() {
return Login;
}
function Test(props) {
console.log(props);
return (
守卫内容
);
// return
// {
// props.isLogin ? Component : {pathname:"/login"}}/
// }
// ;
}
function App() {
return (
React-router
-
首页
-
菜单1
-
列表
-
详情
-
守卫测试
{/* 路由配置 */}
{/* 首页 /nav */}
{/* switch 一般都会和exact属性配合使用 */}
{/* 完全匹配 */}
{/* /list */}
{/* /list/react */}
{/* /list/vue */}
{/* /list/node */}
{/*
{" "}
*/}
);
}
export default App;
通过render可以接收函数组件，给Test属性传递其他的属性
创建PrivateRoute
function PrivateRoute({ component: Component, isLogin,
...rest }) {
// 单独解构出component和isLogin
// component为渲染⽬标组件，isLogin通常来⾃Redux
// rest为传递给Route的属性
return (
// props包含match等信息直接传给⽬标组件
isLogin ? ( // 若登陆渲染⽬标组件
) : ( // 未登录重定向到Login
{
pathname: "/login",
state: { redirect: props.location.pathname
} // 重定向地址
}}
/
)
}
/>
);
}
创建Login
function Login({ location, isLogin, login }) {
const redirect = location.state.redirect || "/"; // 重定向
地址
if (isLogin) return ;
return (
登录
登录
);
}
配置路由，ReduxTest
给PrivateRoute传递isLogin={true}试试
整合redux，获取和设置登录态，创建./store/user.js
const initialState = { isLogin: false, loading: false
};
export default (state = initialState, action) => {
switch (action.type) {
case "requestLogin":
return { isLogin: false, loading: true };
case "loginSuccess":
return { isLogin: true, loading: false };
case "loginFailure":
return { isLogin: false, loading: false };
default:
return state;
}
};
export function login(user) {
return dispatch => {
dispatch({ type: "requestLogin" });
setTimeout(() => {
dispatch({ type: "loginSuccess" });
}, 1000);
};
}引入，store/index.js
import user from "./user";
const store = createStore(
combineReducers({ user }),
applyMiddleware(logger, thunk)
);
连接状态，ReduxTest.js
import { login } from "./store/user.redux";
const PrivateRoute = connect(state => ({
isLogin: state.user.isLogin
}))(function({ isLogin, ...rest }) {})
const Login = connect(
state => ({
isLogin: state.user.isLogin
}),
{ login }
)(function({ isLogin, login }) {})
