1. 新建檔案routes.js，分別定義頁面的路由資訊和其他資訊

const Routes = {
    100: {
        title: "home",
        pageName: "home", 
        path: "/home"
    },　　 101: {　　　　 title: "page1",　　　　 pageName: "page1",　　　　 path: "/page1"　　 },
    102: {
        title: "page2",
        pageName: "page2",
        path: "/page2"
    },
    
 
103: {
        title: "page3",
        pageName: "page3",
        path: "page3"
    }
};

export default Routes;

2. 新建檔案RouteHOC.js

import React from 'react';

const RouteFac = (Route) => {
    return class HOCRoute extends React.Component {
        render() {
            return <Route {...this
 
.props} />;
        }
    };
};

export default RouteFac;

3. 新建檔案utils/history.js

import { createBrowserHistory as createHistory } from 'history';

export default createHistory();

4. 修改入口檔案index.js

import React from 'react';
import ReactDom from 'react-dom';
import history from 'utils/history';
import App 
 
from './App';

ReactDom.render(
    <App history={history} />,
    document.getElementById('app'),
);

其中App.js中配置頁面路徑

const HOCRoute = RouterFac(Route);

const App = ({ history }) => (
    <Router history={history}>
        <Switch>
            <Route path="/" exact component={Home} />
            <HOCRoute {...routes[101]} exact component={page1} />
            <HOCRoute {...routes[102]} exact component={page2} />　　　　　　　<HOCRoute {...routes[103]} exact component={page3} />

</Switch> </Router> ); App.propTypes = { history: PropTypes.shape({}).isRequired }; export default App;

5. 按照配置的路徑新建頁面

    檔案目錄如下：

-pages

　　--page1

　　　　--index.js

　　　　--index.less

　　--page2

　　　　--index.js

　　　　--index.less

　　--page3

　　　　--index.js

　　　　--index.less

./pages/page1/index.js內容為：

import React, { PureComponent } from 'react';

class Page1 extends PureComponent {
    render() {
        return <div>hello,I am page1</div>; 　　}}

export default Page1;

6. 驗證

在瀏覽器開啟url： http://localhost:8080/page1