学习 React 创建路由（超简单）

目录

01 引入路由插件

02 创建目录

03 写入

04 开始使用

05 实现效果

---

01 引入路由插件

React和vue不同，React的路由必须先安装，导入才能正常使用。

默认安装最新的v6版本

cnpm install react-router-dom

安装完成后在 文件中 会多一项 "react-router-dom" 属性，就说明已经安装成功。

02 创建目录

在src目录下创建 router文件和 page文件

router文件和 vue的router是一个意思，都是用来放需要跳转的页面，而且写法也是相同的。

page文件和 vue的views也是一样，用来存放页面和组件的。        

 03 写入

// router  
import A from "../pages/A";
import B from "../pages/B";
import C from "../pages/C";

const routers = [
    {
        path: '/',
        name: 'A页面',
        components: A    // 引入pages文件下的页面
    },
    {
        path: '/B',
        name: 'B页面',
        components: B
    },
    {
        path: '/C',
        name: 'C页面',
        components: C
    }
]

export default routers;    // 将数组导出

// pages     一个简单的页面组件
import React from 'react';

function A() {
    return (
        <div> A页面 </div>
    )
}
export default A;


// pages 
import React from 'react';

function B() {
    return (
        <div> B页面 </div>
    )
}
export default B;


// pages 
import React from 'react';

function C() {
    return (
        <div> C页面 </div>
    )
}
export default C;

04 开始使用

在入口 文件下 引入 react-router-dom 的 BrwoserRouter 或者 HashRouter 用来包住App整个页面

如果只用来跳转页面不传参的话两者二选一都可以

BrowserRouter传参会比HashRouter方便一些，各取所需吧。

// 
import React from 'react';
import ReactDOM from 'react-dom/client';
import './';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, HashRouter } from 'react-router-dom';

const root = (('root'));
(
  <>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </>
);

reportWebVitals();

下面是

先引入两个文件 路由文件 和 安装的路由插件。

Routes 和 vue 的 router-view 相似，有切换页面的作用。

Link 和 vue 的 router-link 一样，页面跳转的作用。 <Link to='A页面的路径'>A页面</Link>

Route 渲染组件        <Route path='A页面的路径' element={<注册的页面 />}></Route>

有一点不同的是，vue 的 router-view 标签里面什么也不用写，它会根据跳转的页面自动匹配并渲染组件。

而 React 的 Routes 标签下需要渲染组件，也就是Route标签。

如果一个一个注册的话太麻烦了，所以我就用了一个懒人方法。用数组自带的map函数遍历出来。这样不管router文件下有几个页面就都可以遍历出来。

// 
import './';
import routers from './router';    // 路由文件
import { Routes, Link, Route } from 'react-router-dom';    // 路由插件

function App() {
  return (
    <div className="App App-header">
      {
        ((item, index) => (
          <Link to={} key={index}> {} </Link>
        ))
      }
      <br />
      <Routes>
        {
          ((item, index) => (
            <Route path={} key={index} element={< />}></Route>
          ))
        }
      </Routes>

    </div >
  );
}

export default App;

注意： 在React中直接遍历渲染 Dom 在控制台中会提示一个报错。

 这句话的意思是没有给 Link标签设置 key 唯一属性，所以在遍历相同标签Dom的时候应该添加一个key属性。

05 实现效果