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

目录

01 引入路由插件

02 创建目录

03 写入router.js

04 开始使用

05 实现效果

---

01 引入路由插件

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

默认安装最新的v6版本

cnpm install react-router-dom

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

02 创建目录

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

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

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

 03 写入router.js

// router index.js 
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 A.js    一个简单的页面组件
import React from 'react';

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


// pages B.js
import React from 'react';

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


// pages C.js
import React from 'react';

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

04 开始使用

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

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

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

下面是App.js

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

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文件下有几个页面就都可以遍历出来。

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

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

    </div >
  );
}

export default App;

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

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

05 实现效果