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

版权声明：本文标题：react路由配置,路由跳转与传值,路由监听 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729175020a1188603.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。