react-router-dom路由

最新推荐文章于 2023-10-17 09:16:30 发布

番薯配可乐

最新推荐文章于 2023-10-17 09:16:30 发布

阅读量433

点赞数

分类专栏： react 文章标签：前端 react.js reactjs

本文链接：https://blog.csdn.net/weixin_43969517/article/details/124232453

版权

安装react-router-dom： npm i react-router-dom

使用：

index.js引入Router文件

// index.js

import Router from './Router';

ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById('root')
);

在Router.js文件中：

// Router.js

import React from "react";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Home from './pages/home';
import List from './pages/list';
import Chat from './pages/chat';
import './App.css';

function AppRouter() {
    const data = [
      {name: '首页', path: '/'},
      {name: '列表', path: '/list'},
      {name: '会话', path: '/chat'},
      {name: '拖拽', path: '/drag'},
    ];
    con