react学习（7）——路由配置

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