初始化一个react项目，并配置路由

  • Z时代
  • 2024-01-10
  • 分类：综合

react

一，初始化

这里使用create-react-app直接初始化一个基本的react项目：

步骤：

1 npm install -g create-react-app   全局安装

2 初始方式：

2.1 

create-react-app react-cli-app 

 [这种最常见遇见报 create-react-app不是命令的错，解决方案有：https://stackoverflow.com/questions/38751830/create-react-app-installation-error-command-not-found

但是我最后，也依然没有可行，有兴趣可以试试]

2.2  

npx create-react-app react-cli-app

npm run start    运行

到这一步后项目能运行成功，但是如果再想配置更多就需要找到配置文件，

运行命令： 

npm run eject

然后就能看到新增两个目录 

二，【新建一个/home    /goods页面】

1 多页面切换使用路由

这里使用react-router-dom包，npm install react-router-dom -s

然后创建文件先。

【这里我将原来的css文件都改scss了，然后会报错提示你下载node-sass,npm install node-sass下载重新运行就好了】

route.jsx

import React from 'react'
import {HashRouter,Route,Redirect,Switch} from "react-router-dom";
import  Home from '../views/home/Home.jsx'
import  Goods from '../views/goods/Goods.jsx'
class RouteMap extends React.Component {
    render() {
        return (
            <HashRouter>
                <main>
                    <Switch>
                        <Route path="/home" exact component={Home}/>
                        <Route path="/goods" exact component={Goods}/>
                        <Redirect to='/home' />
                    </Switch>
                </main>
            </HashRouter>
        )
    }
}
export default RouteMap

home.jsx 及goods.jsx

import React from 'react'
class Home extends React.Component {
    render() {
        return (
            <div>Home</div>
        )
    }
}
export default Home

然后修改app.js，并引入路由文件

import React, { Component } from 'react';
import './App.scss';
import RouteMap from './routes/route.jsx';
class App extends Component {
  render() {
    return (
      <div id="App">
        <RouteMap/>
      </div>
    );
  }
}
export default App;

然后在运行通过路由就能切换了；

以上是 初始化一个react项目，并配置路由 的全部内容， 来源链接： utcz.com/z/383037.html

回到顶部