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路径实现跳转。可以运行项目,在页面上输入路径验证路由是否起效。