react 路由使用react-router-dom

矫情吗；* 2023-06-03 04:54 1阅读 0赞

[react 路由使用react-router-dom][react _react-router-dom]

# [react 路由使用react-router-dom][react _react-router-dom 1] #

react 和vue一样都是使用封装history 来进行页面跳转，下面就来说一下react常用的路由插件react-router-dom这个东西在GitHub上 目前是最受欢迎的

首相还是先下载

npm i react-router-dom

引入：

这里推荐新建一个单独的router.js文件去同意管理你的路由

router.js：

![复制代码][copycode.gif]

import React from 'react';
    import {HashRouter, Route, Switch} from 'react-router-dom';
    import {Home} from "./page/home/home"; //引入的组件
    import {Mine} from "./page/mine/mine";//引入的组件
    
    const BasicRoute = () => (
        <HashRouter>
            <Switch>
                {/*//定义路由地址*/}
                <Route exact path="/home" component={Home}/>
                <Route exact path="/" component={Mine}/>
            </Switch>
        </HashRouter>
    );
    
    
    export default BasicRoute;

![复制代码][copycode.gif]

然后再在入口页 我这是app.js 引入router.js文件 使用就可以了

![复制代码][copycode.gif]

import React from 'react';
    import Router from "./router"//引入router.js
    
    import './App.css';
    import './style/public.less';
    
    function App() {
        return (
            <div className="App">
                <Router/>
            </div>
        );
    }
    
    export default App;

![复制代码][copycode.gif]

posted on 2019-09-24 08:11 [blankOne][] 阅读( ...) 评论( ...) [ 编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/blankOne/p/11576207.html

[react _react-router-dom]: https://www.cnblogs.com/blankOne/p/11576207.html
[react _react-router-dom 1]: https://www.cnblogs.com/wrhbk/p/11321233.html
[copycode.gif]: /images/20230601/98194b58a11747afbe09b36c7cccb10a.png
[blankOne]: https://www.cnblogs.com/blankOne/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11576207