1.React 路由5.0配置

最新推荐文章于 2025-11-15 18:41:11 发布

原创最新推荐文章于 2025-11-15 18:41:11 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ecmascript

本教程介绍了如何使用react-router-dom5.x版本设置React应用的路由。首先，通过npm安装react-router-dom模块，然后在入口文件中引入HashRouter或BrowserRouter来包裹根组件。接着，在路由文件中创建Route组件进行路由配置，并使用Switch处理路径匹配。同时，教程还展示了如何创建路由重定向以及在组件中使用Link进行页面跳转。

提示: 此教程使用react-router 5.x 版本实现
1, 下载react的路由模块
   npm install react-router-dom@5 --save
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件
   (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
   import { HashRouter } from 'react-router-dom'
   ReactDOM.render(
       <HashRouter >
       <App />
   </HashRouter >,
       document.getElementById('root')
   );
3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route
   import { Route, Switch } from "react-router-dom";
4, 创建路由组件,配置路由, 并导出
   export default function MyRouter(){
   return(
       <Switch >
   <Route exact path="/" component={Home} />
               {/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}
   <Redirect from="/" to="/home" />
   </Switch >
   )
   }
5, 在app.js中导入路由组件
   import RouterView from './router/index';
6, 在根组件app模板中添加路由组件,即路由出口
   <RouterView></RouterView>
7, 在需要跳转的页面, 从路由模块导入工具组件 Link
   import {Link} from 'react-router-dom'
8, 使用Link组件执行路由跳转
   <Link to="/">首页/Link>