【react学习】react-router-dom v5如何进行路由跳转

luckyMuses

已于 2023-06-20 10:34:01 修改

阅读量1.1k

点赞数

文章标签： react.js 学习前端

于 2023-06-13 11:37:23 首次发布

本文链接：https://blog.csdn.net/qq_39844855/article/details/131184144

版权

本文介绍了如何在React项目中集成ReactRouterv5.x，包括安装依赖、注册路由、在App中使用路由以及处理路由跳转问题。特别提到了在TypeScript环境下需要安装@types/react-router-dom以避免类型错误，并解释了直接使用component属性与使用嵌套标签注册组件在处理history对象上的差异。

摘要由CSDN通过智能技术生成

首先注明我用的项目依赖版本

react 【^18.2.0】
react-dom【^18.2.0】
react-router-dom【^5.2.0】
@types/react-router-dom【^5.3.3】

注：一般情况只需要安装react-router-dom依赖就好，但如果你使用了typeScript那么就需要安装@types/react-router-dom，否则没有类型声明会报错

一，安装路由依赖

npm i react-router-dom@5.2.0 @types/react-router-dom@5.3.3 --save

二，注册路由

在根目录下新建routes.ts（在哪里新建都行）

// 导入路由组件
import Page1 from './pages/page1'
import Page2 from './pages/page2'

const routes = [
	{
		path: '/page1',
		exact: true,
		component: Page1
	},
	{
		path: '/page2',
		exact: true,
		component: Page2
	}
]

export default routes;

三，使用路由并挂载

在App.tsx中编写如下代码，路由注册有两种写法

import React from 'react';
import routes from './routes';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app-container">
        <Switch>
          {
            routes.map((item:any) => {
              return (
              	// 写法一
                <Route path={item.path} key={item.path} component={item.component} />

				// 写法二
				<Route path={item.path} key={item.path}>
					{item.component}
				</Route>
              )
            })
          }
        </Switch>
      </div>
    </Router>
  );
}

export default App;

四，写法一和写法二的注意事项

在 React Router 中，如果你在 Route 组件上使用 component 属性来渲染组件，会自动将 match、location 和 history 这三个对象作为属性传递给这个组件。这是因为 Route 组件内部使用了高阶组件技术（HOC），在渲染组件时将这些参数注入到组件的 props 中，而访问history和核心代码是this.props.history

写法一：如果你直接在Route标签上传递了component属性，那么你可以在Page1或Page2或你自己的组件中通过useHistory来跳转路由

写法二：根据上诉所说，如果你使用标签嵌套的方式来注册组件，这个时候，你在组件中通过const history = useHistory()来获取history对象，history的值为undefined，导致无法跳转路由，甚至是报错，解决方案如下：
在这里插入图片描述

五，修改index.tsx中的代码

其实做完上面几步，在地址栏改变路由就可以跳转页面了，但是我们一般在项目中会使用history或其他方式来跳转路由，如果你不修改如下代码，会造成路由变了，但是页面不更新的问题

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

import App from './App'

const root = ReactDOM.createRoot(
	document.getElementById('root') as HTMLElement
);

root.render(
	//这里的React.StrictMode需要删掉，否则会造成页面不刷新
	//<React.StrictMode>
	<App />
	// </React.StrictMode>
);

reportWebVitals();