昆明免费建站模板,中国前100强企业,小程序网,装修设计公司咨询配置基础路由
目标#xff1a;配置登录页面的路由并显示在页面中
步骤#xff1a;
安装路由#xff1a; yarn add react-router-dom5.3.0 5 和 6 两个版本对组件类型的兼容性和函数组件支持有所改变#xff0c;在这里使用的是 5。
和路由的类型声明文件 yarn add types…配置基础路由
目标配置登录页面的路由并显示在页面中
步骤
安装路由 yarn add react-router-dom5.3.0 5 和 6 两个版本对组件类型的兼容性和函数组件支持有所改变在这里使用的是 5。
和路由的类型声明文件 yarn add types/react-router-dom -D 使用 -D 标志将其添加为开发依赖项这意味着它只会在开发过程中使用而不会包含在最终的生产构建中。
在 pages 目录中创建两个文件夹Login、Layout 分别在两个目录中创建 index.tsx 文件并创建一个简单的组件后导出
src\pages\Layout\index.tsx
export default function Layout() {return div布局页面/div;
}src\pages\Login\index.tsx
const Login () {return div登录页面/div;
};
export default Login;在 App 组件中导入路由组件以及两个页面组件并配置 Login 和 Layout 的路由规则
import ./App.scss;
// 导入路由
// as 是ES6中的特性允许为导入的模块或对象指定新的名称。
import { BrowserRouter as Router, Route } from react-router-dom;// 导入页面组件
import Layout from ./pages/Layout;
import Login from ./pages/Login;// 配置路由规则
function App() {return (Routediv classNameappRoute path/homeLayout/Layout/RouteRoute path/loginLogin/Login/Route/div/Route);
}export default App;
默认展示首页内容
目标能够在打开页面时就展示首页内容
分析说明
匹配默认路由进行重定向
Introduction | React Router 中文文档 (react-guide.github.io)Route 的 render 属性用来内联渲染任意内容
步骤
在 App.tsx 中添加一个新的 Route用来匹配默认路由
在这里修改了路由的导入 import { Router, Route, Switch, Redirect } from “react-router-dom”; 为 Route 组件添加 render 属性用来渲染自定义内容 在 render 中渲染 Redirect 实现路由重定向
