React-Router-DOM

Install

yarn add react-router-dom

import:

import * as ReactRouter from 'react-router-dom';

路由器 - ReactRouter.Router

路由器主要分两种模式：history和hash，其中ReactRouter.BrowserRouter使用history模式，ReactRouter.HashRouter使用hash模式。

@see: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Router.md

ReactRouter.Router需要一个history参数，这是一个使用ReactRouter.Router的例子：

import * as React from 'react';
import { Button } from '@material-ui/core';
import * as ReactRouter from 'react-router-dom';
import * as History from 'history';

const history = History.createBrowserHistory();

export default class extends React.Component {
    render() {
        return (
            <ReactRouter.Router history={history}>
                <div>
                    <Button variant="contained">
                        <ReactRouter.Link to="/">
                            回到主页面
                        </ReactRouter.Link>
                    </Button>

                    <Button variant="contained">
                        <ReactRouter.Link to="/a">
                            测试A页面
                        </ReactRouter.Link>
                    </Button>

                    <Button variant="contained">
                        <ReactRouter.Link to="/b">
                            测试B页面
                        </ReactRouter.Link>
                    </Button>
                </div>

                <ReactRouter.Switch>
                    <ReactRouter.Route path="/a">
                        <h1>A</h1>
                    </ReactRouter.Route>

                    <ReactRouter.Route path="/b">
                        <h1>B</h1>
                    </ReactRouter.Route>
                </ReactRouter.Switch>
            </ReactRouter.Router>
        );
    }
};

ReactRouter.BrowserRouter

官方建议使用更高级的Router组件，与上个例子等价的ReactRouter.BrowserRouter组件实现如下：

import * as React from 'react';
import { Button } from '@material-ui/core';
import * as ReactRouter from 'react-router-dom';

export default class extends React.Component {
    render() {
        return (
            <ReactRouter.BrowserRouter>
                  ...
            </ReactRouter.BrowserRouter>
        );
    }
};

ReactRouter.HashRouter

import * as React from 'react';
import { Button } from '@material-ui/core';
import * as ReactRouter from 'react-router-dom';

export default class extends React.Component {
    render() {
        return (
            <ReactRouter.HashRouter>
                  ...
            </ReactRouter.HashRouter>
        );
    }
};

自定义Link

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const CustomLink = ({ history, to, onClick, tag: Tag, ...rest }) => (
    <Tag
        {...rest}
        onClick={(event) => {
            onClick(event);
            history.push(to)
        }}
    />
);

CustomLink.propTypes = {
    to: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired,
    history: PropTypes.shape({
        push: PropTypes.func.isRequired
    }).isRequired,
    onClick: PropTypes.func
};
CustomLink.defaultProps = {
    onClick: () => {}
};
export default withRouter(CustomLink);

END