首页 > 其他分享 >3.引入路由 react-router-dom V6

3.引入路由 react-router-dom V6

时间:2023-02-24 19:35:47浏览次数:32  
标签:dom admin react V6 import login jsx 路由

需要先下载路由     npm install react-router-dom【版本:6.8.1】   安装 antd的icons:     npm install --save @ant-design/icons 【版本:5.0.1】   前台路由的拆分如下pages下新建login/login.jsx和admin/admin.jsx:     登陆:/login                 login.jsx       主界面:/                 admin.jsx    路由组件实现:App.js文件中代码如下:

import React from 'react'
import { BrowserRouter, Routes, Route} from 'react-router-dom'
import { ConfigProvider } from 'antd'
import 'antd/dist/reset.css'
import './App.css';
import Login from './pages/login/login'
import Admin from './pages/admin/admin'


function App() {
  return (
      <ConfigProvider
          theme={{
            token: {
              colorPrimary: '#00b96b',
            },
          }}
      >
        {/*<div className="App">*/}
        {/*  <Button type="primary">Button</Button>*/}
        {/*</div>*/}
          <BrowserRouter>
              <Routes>
                  <Route path="/login" element={<Login/>}>


                  </Route>
                  <Route path="/" element={<Admin/>}>


                  </Route>
              </Routes>
          </BrowserRouter>
      </ConfigProvider>
  );
}


export default App;

 

标签:dom,admin,react,V6,import,login,jsx,路由
From: https://www.cnblogs.com/guo-s/p/17152856.html

相关文章

  • React Native学习笔记----React Native简介与环境安装
    ReactNative的基础是React,是在web端非常流行的开源UI框架。要想掌握ReactNative,先了解React框架本身是非常有帮助的。一、什么是ReactNative1.1ReactNati......
  • React 的生命周期
    InitializationsetuppropsandstateMountingcomponentWillMountrendercomponentDidMountUpdationprops发生变化componentWillReceiveProps//1.从父组件......
  • 如何优雅地在 React 中使用TypeScript,看这一篇就够了!
    工作用的技术栈主要是Reacthooks+TypeScript。使用三月有余,其实在单独使用TypeScript时没有太多的坑,不过和React结合之后就会复杂很多。本文就来聊一聊TypeScript与Re......
  • thirty-two(模型点击展示)react-three-fiber
    模型点击蒙版展示点击展示目的(用户需要看见模型中更加多的内容信息)使用技术ThreeJs、React-three-fiber、React-three-drei、React、css整体思路:  1、在展示模型中......
  • 一文读透react精髓
    学和使用react有一年多了,最近想在梳理一下react基础知识,夯实基础,激流勇进~关于reacr-router,redux,redux-saga后续都会慢慢输出,希望各位看官老爷持续关注~~要是能给个赞......
  • 阿里前端二面必会react面试题指南
    这段代码有什么问题吗?这段代码有什么问题:this.setState((prevState,props)=>{return{streak:prevState.streak+props.count,};});答案:没有什么问......
  • React从入门到实战- 企业级实战项目-宜居三
    2019年最新React从入门到实战(带React企业级实战项目-宜居)(ReactHook新特性&)ReactHook新特性&(1.React新特性StateHook&)1.React新特性StateHook&App.jsimportR......
  • React组件化一
    29.9React课程第02节:react组件化第2节:02课react组件化(02课react组件化&)02课react组件化初始化显示constructor构造函数,要使用super(),否则没法在内部使用this2与......
  • react核心
    29.9React课程第1节:react核心(react核心&)react核心&如果是cdn最好增加crossorgin跨域属性,直接避开校验直接引入资源文件crossorigin跨域引入CDN,create-react-app,np......
  • IPv6过渡技术的推进策略
    由于IPv6地址数量庞大,因此IPv6是替代IPv4地址数量有限的最终解决方案。其中,IPv6的过渡,按照双栈引入、DS-Lite逐步切换、6RD局部补充的步骤依次进行。1、双栈方案是IPv6试点......