vite react-router-dom 简单使用

因为搜了好多都找不到记录一下

时间2023-08-18
版本

"react": "^18.2.0",

 "react-dom": "^18.2.0",

"react-router-dom": "^6.15.0",

//    router/routes.jsx

//    有使用懒加载的 但是我在跳转时报错 查了查没找到用的这种

import page1 from '../views/v1/page1'
import page2 from '../views/v1/page2'
import page3 from '../views/v1/page3'

const routes = [
  { path: '/', title: '/', element: page1 },
  { path: '/page2', title: 'page2', element: page2 },
  { path: '/page3', title: 'page3', element: page3 },
]



//   router/index.jsx 
import { Route, Routes } from "react-router-dom";
import routes from './routes';
export default function Router() {
  return (
    <div >
      <Routes>
        {
            routes.map((item, index) => (
              <Route key={index} path={item.path} element={<item.element />} />
            ))
        }
      </Routes >
    </div>
  )
}


//    App.js 
import './App.css'
import React, { Component } from 'react';
import Router from './router';
import { Link } from "react-router-dom";

export default class App extends Component {
  render() {
    return (
      <div>
          <Link to="/">     <h4>page1</h4> </Link>
          <Link to="/page2"><h4>page2</h4> </Link>
          <Link to="/page3"><h4>page3</h4> </Link>
          <Router />
      </div>
    )
  }
}


// main.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {BrowserRouter} from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

刚学的react,很多地方不规范，不正确，欢迎指正

他这个版本好像不太对
参考1：React 路由详解(超详细详解)_react路由_普通网友的博客-CSDN博客

参考2：解决“Uncaught Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element......“报错_南风吹云的博客-CSDN博客

<Route path="/first" element={<First />}></Route>


使用的element  

{<First />}