react 配置src路径

在 webpack.config.js 中配置别名

alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
// 配置本地的路径
        '@': path.resolve('src'),
        'configure': path.resolve('src/configure/'),
        'component': path.resolve('/src/component/'),
        'modules': path.resolve('/src/modules/'),
        'container': path.resolve('/src/container/'),
        'actions': path.resolve('/src/actions/'),
        'reducers': path.resolve('/src/reducers/'),
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在React Vite项目中配置路由,你可以按照以下步骤进行操作: 1. 首先,安装所需的依赖包。在项目根目录下运行以下命令: ``` npm install react-router-dom ``` 2. 创建一个新的文件夹(例如:`src/router`),用于存放路由相关的文件。 3. 在该文件夹中创建一个新的文件(例如:`index.js`),用于配置路由。在该文件中,你可以导入所需的组件和React Router相关的模块。 ```jsx import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; // 导入你的页面组件 import Home from '../pages/Home'; import About from '../pages/About'; function AppRouter() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> {/* 添加更多的路由规则 */} </Switch> </Router> ); } export default AppRouter; ``` 在上面的代码中,我们使用`BrowserRouter`作为路由容器,`Switch`用于确保只有一个路由能够匹配,`Route`用于定义具体的路由规则,包括路径和对应的组件。 4. 在根组件中使用路由。在你的根组件(通常是`App.js`)中导入并渲染路由组件。 ```jsx import React from 'react'; import AppRouter from './router'; function App() { return ( <div className="App"> <AppRouter /> </div> ); } export default App; ``` 这样,你就完成了React Vite项目的路由配置。你可以根据需要添加更多的路由规则,并在对应的组件中处理路由导航和页面渲染。记得根据你的项目结构和需求,调整文件路径和导入语句。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hero_孙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值