react脚手架配置路由

要在React脚手架中配置路由，需要进行以下步骤：
1. 安装React-Router相关的模块（React-Router，React-Router-DOM）。
2. 在需要使用路由的组件中，引入BrowserRouter、Route、Link等组件。
3. 使用Route组件来定义路由规则，指定路径和对应的组件。
4. 使用Link组件来创建链接，实现页面跳转。
5. 使用withRouter函数加工一般组件后，可将一般组件变为路由组件，从而可以使用路由组件的方法。
6. 可以使用路由懒加载来提高页面加载速度。

下面是一个简单的React脚手架配置路由的例子：

1. 首先，在终端中使用npm安装React-Router和React-Router-DOM模块：

npm install react-router-dom --save

2. 在需要使用路由的组件中，引入BrowserRouter、Route、Link等组件：

import { BrowserRouter, Route, Link } from 'react-router-dom';

3. 使用Route组件来定义路由规则，指定路径和对应的组件：

<BrowserRouter>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>

4. 使用Link组件来创建链接，实现页面跳转：

<Link to="/about">About</Link>

5. 使用withRouter函数加工一般组件后，可将一般组件变为路由组件，从而可以使用路由组件的方法：

import { withRouter } from 'react-router-dom';

const MyComponent = ({ history }) => (
<button onClick={() => history.push('/about')}>
Go to About page
</button>
);

export default withRouter(MyComponent);

6. 可以使用路由懒加载来提高页面加载速度：

import Loadable from 'react-loadable';

const Home = Loadable({
loader: () => import('./Home'),
loading: () => <div>Loading...</div>,
});

const About = Loadable({
loader: () => import('./About'),
loading: () => <div>Loading...</div>,
});

const Contact = Loadable({
loader: () => import('./Contact'),
loading: () => <div>Loading...</div>,
});