react学习(7)——路由配置

  • Post author:
  • Post category:其他

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 

 

转载于:https://www.cnblogs.com/chaoxiZ/p/9681890.html