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 

标签：index,--,App,配置,js,react,history,路由,page1
来源： https://blog.51cto.com/u_7605937/2704401