标签：index -- App 配置 js react history 路由 page1

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。