react路由最新版使用详解

50 阅读 0 评论 33 点赞

我是靠谱客的博主高挑鸡，最近开发中收集的这篇文章主要介绍react路由最新版使用详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、使用Link方式跳转

1、首先在index.js文件中引入BrowserRouter

BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信,而HashRouter不能(除非手动拼接URL字符串),因此一般配合Redux使用,实现组件间的数据通信。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from 'react-router-dom'

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

2、在App.js文件中引入Route,Routes,Link

路由的配置需要用Routes包裹

如：

<Routes>

<Route path='/home' element={<Home/>} />

</Routes>

导航菜单的配置（跳转）

如：<Link to='/home'>首页</Link>

import './App.css';
import {Button} from 'antd'
import { Route,Routes,Link } from 'react-router-dom';
import Home from './pages/Home';
import CityList from './pages/CityList';

function App() {
  return (

      <div className="App">
        {/* 配置导航菜单 */}
        <Link to='/home'>首页</Link>
        <Link to='/citylist'>城市</Link>
        {/* 配置路由 */}
        <Routes>
           <Route path='/home' element={<Home/>}/>
           <Route path='/citylist' element={<CityList/>}/>
        </Routes>  
      </div>

  );
}

export default App;

V5版本跳转代码：

<Route path="/home" component={Home} />

<Link to='/home' >跳转列表页面</Link>