学习笔记——react路由配置

---

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

1.书写组件： 

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

 

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;

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

<Route path='/address' component={ Pages.Address }></Route>

为了能够简写，所以我们在给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路径实现跳转。可以运行项目，在页面上输入路径验证路由是否起效。