搜索到
1257
篇与
的结果
-
react如何使用路由、路由使用方法 1、 首先安装路由npm i react-router-dom插件，已安装的可以跳过npm i react-router-dom2、打开项目下src\index.js文件，添加如下代码import {HashRouter as Router, Switch, Route} from 'react-router-dom'; import Login from './pages/Login/Login'; import Wecome from './pages/Home/Wecome';3、 路由部分代码，path为路径，component为组件地址ReactDOM.render( <Router> <Switch> <Route path="/login" component={Login}/> <Route path="/wecome" component={Wecome}/> </Switch> </Router>, document.getElementById('root') );4、 完全index.js路由代码import React from 'react'; import ReactDOM from 'react-dom'; import {HashRouter as Router, Switch, Route} from 'react-router-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import Login from './pages/Login/Login'; import Wecome from './pages/Home/Wecome'; ReactDOM.render( <Router> <Switch> <Route path="/login" component={Login}/> <Route path="/wecome" component={Wecome}/> </Switch> </Router>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();5、 访问：输入下面url即可访问http://localhost:3000/#/login -
React路由封装、404页面设置 1、 项目根目录下新建routes路由文件夹和路由文件index.js，在index.js添加如下代码，用与存放路由、配置路由，分别添加了mainRoutes和adminRoutes模块import Login from '../pages/Login/Login'; import Wecome from '../pages/Home/Wecome'; import PageNotFound from '../pages/PageNotFound/PageNotFound'; export const mainRoutes = [ { path: '/login', component: Login }, { path: '/404', component: PageNotFound } ] export const adminRoutes = [{ path: '/admin/wecome', component: Wecome }]2、 项目更目录src\index.js相关代码：import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom'; import { mainRoutes } from './routes' import App from './App'; ReactDOM.render( <Router> <Switch> <Route path="/admin" render={routeProps=><App {...routeProps} />}/> {mainRoutes.map(route=>{ return <Route key={route.path} {...route}/>; })} <Redirect to="/404"/> </Switch> </Router>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();3、 修改项目根目录app.js下代码，引入adminRoutes代码，用来显示后台相关页面import React from "react" import { Switch, Route, Redirect } from 'react-router-dom'; import { adminRoutes } from './routes'; function App() { return ( <div className="App"> <h1>app</h1> <Switch> {adminRoutes.map(route=>{ return <Route key={route.path} path={route.path} exact={route.exact} render={routeProps=>{ return <route.component {...routeProps}/> }} /> })} </Switch> </div> ); } export default App;4、新建/pages/PageNotFound/，并创建文件PageNotFound.js，做404页面import React from 'react' function PageNotFound() { return ( <div> <h1>404</h1> </div> ) } export default PageNotFound上面封装好路由也，如果页面url不存在，则会跳转到404页面。
-
React如何引入外部css样式 比如有下面这段代码import React from 'react' import 'antd/dist/antd.css'; import { Layout, Menu, Breadcrumb } from 'antd'; const { Header} = Layout; function Index(props) { const state = { collapsed: false, }; return ( <Layout> <Header className="header"> <div className="logo"> <img src="https://www.tpxhm.com/fdetail/logo192.png" alt="" /> <span>Ant Design</span> </div> </Header> </Layout> ) } export default Index我们通过设置className="",就可以对其样式进行设置1、 首先，我们在项目根目录下的src目录下穿件目录assets，用于存储我们的样式2、 其次，我们新建style.css文件，用于编写我们的样式3、 引入：打开项目根目录下的App.js文件，采用以下方式引入import './assets/style.css';
-
-
关于Line 14:1: Import in body of module; reorder to top import/first的解决方法 一、问题：最近在react antd框架中，引入阿里云图标库出现下面的错误。Failed to compilesrc\compoments\Frame\Index.jsLine 14:1: Import in body of module; reorder to top import/firstSearch for the keywords to learn more about each error.来源代码：const { SubMenu } = Menu; const { Header, Content, Sider } = Layout; // 引入阿里图标库 import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2742997_8grglts0v4.js', });二、解决方法将import语句写在const语句上面即可：这样就不在报上面的错误了。
