admin管理员组文章数量:1633739
1.react路由配置
1.1 下载react的路由模块
(默认最新6.3, 如需使用5.x, 在模块名后加@5)
npm install react-router-dom --save // 6.0
或
npm install react-router-dom@5 --save // 5.0
1.2 在入口文件 src/index.js中,从路由模块导入工具组件HashRouter ,并包裹根组件
(注: 哈希模式用 HashRouter ,历史模式用 BrowserRouter)
import { HashRouter } from 'react-router-dom'
ReactDOM.render(
<HashRouter >
<App />
</HashRouter >
);
1.3 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route
- router5.0使用Switch ,router6.0使用Routes
import { Switch, Route } from "react-router-dom"; // 5.0
或
import { Routes, Route } from "react-router-dom"; // 6.0
1.4 创建路由组件,配置路由,并导出
- router6.0 去除了exact, 并把component引入组件构造器改成了element引入组件实例
export default function MyRouter(){ // 5.0
return(
<Switch >
<Route exact path="/" component={Home} />
</Switch >
)
}
或
export default function MyRouter(){ // 6.0
return(
<Routes >
<Route
版权声明:本文标题:react路由配置,路由跳转与传值,路由监听 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729175020a1188603.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论