从零搭建react项目

1、进入目录 利用create-react-app创建项目

npm install -g create-react-app

2、创建自己的项目

create-react-app react-mytoutiao(项目名称自定义)

3、进入项目，启动

cd react-mytoutiao

npm start 创建成功

 

此时目录长这样

4、使用router

安装npm install react-router-dom --save    //4以上

src目录创建router/index.js       (router版本不同，引入有区别）

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../views/Home/home";
import About from "../views/About/about";

export default function Router() {
    {/* 所有的路由配置均在 BrowserRouter 内部 */}
    return (
        <BrowserRouter>

            {/* 使用 Routes 替换曾经的 Switch */}
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='goods' element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

修改src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './router/index'

ReactDOM.render(<App />, document.getElementById('root'))

about.js

import React from 'react'
import { Link } from 'react-router-dom'

const About = () => (
    <div>
        <p>这是about页面</p>
        <Link to="/home">去 Home页面</Link>
    </div>
)

export default About

home.js

import React from 'react'
import { Link } from 'react-router-dom'

const Home = () => (
    <div>
        <p>这是 home 页面</p>
        <Link to="/about">去About页面</Link>
    </div>
)

export default Home