react react-router-dom的使用

最新推荐文章于 2024-08-06 16:47:23 发布

小猿猪哥

最新推荐文章于 2024-08-06 16:47:23 发布

阅读量2.3k

点赞数

分类专栏： react 学习记录文章标签： react react-router-dom 路由 vue

本文链接：https://blog.csdn.net/zhuming3834/article/details/89354964

版权

react 学习记录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

继续之前的react。最近把之前的几篇关于react的博客整理了一下，也整了一个小Demo。
关于react-router-dom，大家可以先去看看它的github。这里不做介绍。只说说新建项目怎么使用。

新建项目

《create-react-app 快速构建react项目》。可以先去看看之前的文章。

安装react-router-dom

npm install --save react-router-dom

这个过程需要一点时间，感觉和网络相关度比较大。

新建`router.js`文件

在新建这个之前先看看项目的目录结构：
在这里插入图片描述
这个目录结构其实和之前的vue项目结构基本一致。大家可以去看看之前我的vue系列文章。
router.js文件内容：

import React, { lazy,Suspense } from 'react';
import { Route,HashRouter , Switch } from 'react-router-dom';
import { Layout } from 'antd';
// import Slide from './components/common/Slide';
// import Header from './components/common/Header';
import '../src/components/assets/css/index.less'
const {Header, Footer, Sider, Content} = Layout;

// 路由表

const Home = lazy(() => import('./components/pages/home')); // 首页
const Detail = lazy(() => import('./components/pages/detail')); // 详情


const MyRoute = (props) => {
    return (
        <Layout>
            <Sider>Sider</Sider>
            <Layout>
                <Header>Header</Header>
                <Content>
                    <HashRouter > // 大家只需关注这里即可，由于我使用了ant 外面的结构代码可以暂时忽略
                        <Suspense fallback={<div>Loading...</div>} maxDuration={1000}>
                            <Switch>
                                <Route exact path="/" component={Home}/>
                                <Route exact path="/home" component={Home}/>
                                <Route exact path="/detail" component={Detail}/>
                            </Switch>
                        </Suspense>
                    </HashRouter >
                </Content>
                <Footer>Footer</Footer>
            </Layout>
        </Layout>
    )
}
export default MyRoute;

路由使用了懒加载，hash模式。

使用`router.js`文件

在app.js文件中使用：

import React, { Component } from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import MyRoute from './router.js';
import './App.css';
import './index.less';

class App extends Component {
  render() {
    return (
      <Router>
        <MyRoute />
      </Router>
    );
  }
}
export default App;