关于React的路由使用

最新推荐文章于 2025-03-11 17:33:27 发布

原创最新推荐文章于 2025-03-11 17:33:27 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了如何在React项目中使用ReactRouterV6配置路由，包括导入模块、使用BrowserRouter、组件导入和路由设置。同时，对比了V6与VueRouter的异同，指出两者在灵活性和易用性上的特点。

一、模块导入

因为具有一定的Vue基础。所以在创建ReactCli方面，以及配置简单的main.tsx、App.tsx就不多说了。本文使用的是typescript + React，但使用 j s 的在配置路由方面依然通用。

npm install react-router-dom || yarn add react-router-dom

这里先说最新的Router版本方法，React Router V6，截至目前的话，版本好像是6.4.

很多方法删了，也很多方法改了。在文末我会提一下..

二、代码导入

这里我就直接把代码附上，方便想直接调试的朋友。代码注释也就是需要注意的点，就不在文中说了。

项目目录

1.main.tsx

import ReactDOM from 'react-dom/client';
import App from "./App";
import { BrowserRouter } from "react-router-dom"
// 引入模块，使用BrowserRouter包裹 项目入口 页面
ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2.App.tsx

import { useRoutes }from 'react-router-dom'
import router from './router'
//这里引用了router.tsx文件，如果不使用这种方法，还有另一种写法

//使用useRoutes将路由文件载入
function App(){
  return useRoutes(router)
}
 
export default App;

3.router

import Login from "../Login";
import Home from "../Home";
import { RouteObject } from "react-router-dom";

const router:RouteObject[] = [
  {
    path:'/',
    element:<Home></Home>
  },
  {
    path:'/login',
    element:<Login></Login>
  }
]

export default router

4.Home.tsx

import React, { Component } from 'react'

export class Home extends Component {
  render() {
    return (
      <div>Hello,this is Home page</div>
    )
  }
}

export default Home

5.Login.tsx

import { useNavigate }from 'react-router-dom'

function Login(){

//使用useNavigate做按钮事件的页面跳转
    const navigate = useNavigate()
    const login = () => {
      navigate('/')
    }
  
  return(
    <div>
      <button onClick={login}>Login</button>
    </div>
  )
}
 
export default Login;

三、其他细节

因为V6和V5两个版本并不是方法互通的，所以很多V5的路由跳转在V6都没法实现；同样，V6新定义的自然在V5也没法使用。如果小伙伴需要使用V5，记得先使用

npm uninstall react-router-dom

卸载掉之前的版本，之后

npm install react-router-dom@5.1.2

@之后填写相对应的react-router版本，

这里举例来说，在main.tsx中，V5版本就有很大的不同：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter,Switch,Route} from 'react-router-dom'; // 导入 BrowserRouter
import Index from './index.tsx';
import Test from './test.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
  <Switch>
      <Route exact path="/">
          <Index/>
      </Route>
      <Route path="/test">
          <Test/>
      </Route>
  </Switch>
</BrowserRouter>
);

并且，在路由跳转中，也是使用的link进行跳转。

react-router的使用相较于Vue来说更加灵活，但Vue的router使用相较于React简单方便。

各有千秋。