一、模块导入
因为具有一定的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简单方便。
各有千秋。