学习笔记——react路由配置

ゞ浴缸里的玫瑰 2022-11-22 05:27 104阅读 0赞

--------------------

> react中的路由配置是react项目中一个重要的功能。通过配置好的路由，我们可以实现不同组件的切换，进而实现单页面应用程序。

### 1.书写组件：  ###

> 配置路由之前，我们首先要书写一些需要的页面级组件。我们可以在项目的src目录下新建一个pages文件夹，在文件夹中，再为每个组件新建个文件夹，文件夹中新建index.jsx文件，组件文件夹的名字使用Pascal命名法（首字母大写）,jsx对象全部用index命名。且jsx对象中组件名称与组件文件夹名相同。如下图所示：

![20201103194802520.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

### 2.组件导出： ###

> 然后，在pages文件夹下写一个index.js文件来将组件自动化集体导入导出。为了能够实现简单的导入导出，我们在上面给组件起名和组件文件夹起名的时候，使用了点小技巧，这要就可以使用正则表达式，简单获取需要的数据。

// 自动化导出与导出所有页面级组件
    let files =  require.context('../pages', true, /index.jsx$/);// 批量导入导出，webpack自带方法
    let Pages = {};
    
    files.keys().forEach(filePath => {
            let key = filePath.match(/.*\/(.*)\/index.jsx$/)[1];
            Pages[key] = files(filePath).default;
    });
    
    export default Pages;

### 3.实现路由跳转： ###

> 在根组件App.jsx中导入所有组件。并在render()函数的return中实现路由跳转。

> 首先，我们需要打开项目文件夹，在文件夹中点击右键，打开命令窗口，安装一个包：

yarn add react-router-dom

import React, {Component} from 'react';
    import  './App.css';     // 导入样式文件
    import { Switch, Route, Redirect } from 'react-router-dom';
    import Pages from './pages';
    
    class App extends Component{
        render(){
            return (
                <Switch>
                    <Route path="/" exact><Redirect to="/home" /></Route>
                    {/* 简写 */}
                    {Object.keys(Pages).map(key => (
                        <Route key={ key } path={ `/${ key.toLowerCase()}` } 
                        component={ Pages[key] }></Route>
                    ))}
                    <Route path="*" component={ Pages.Page404 } />
                </Switch>
           );
       }
    }
    
    export default App;

> 在上述代码中的简写部分，相当于以下代码：

> 为了能够简写，所以我们在给path命名的时候有一点技巧，组件名使用toLowerCase()函数就是path内容。所以上述代码中，我们无须写多遍Route，我们只需要迭代，字符串拼接即可。

### 4.在根实例中引用： ###

>  在根实例中，导入需要的包。做以下操作：

import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App.jsx';
    import { HashRouter } from 'react-router-dom';    // 用到的包
    
    ReactDOM.render(
            <HashRouter>
                    <App />
            </HashRouter>,
            document.getElementById('root')
    );

> 通过以上操作，我们就可以根据自己在跟组件中书写的path路径实现跳转。可以运行项目，在页面上输入路径验证路由是否起效。

[20201103194802520.png]: https://img-blog.csdnimg.cn/20201103194802520.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221120/3d1c378bb47e40fc8de9b7a5579b767e.png