React-Keeper : 比React-Router更适合你的单页面路由器

- 日理万妓 2022-03-26 11:10 132阅读 0赞

*  虽然多了缓存，但是它的链接默认多了一个\#,例如[http://localhost:3000][http_localhost_3000]/\#/
 *  用a标签替代Link和CacheLink时，遇到如下问题：

<HashRouter>
     <div> 
    <ul className='nav navbar-nav'>
     <li> <a href="/">Home</a> </li> 
     <li> <a href='/about'>About</a> </li> 
    </ul> 
    <hr /> 
    <Route cache component={Home} path='/' /> 
    <Route cache path='/about' component={About} /> 
    </div> 
    </HashRouter>

首页刷新进入时：http://localhost:3000/\#/，当页面跳转时，链接为http://localhost:3000/about\#/

使用a代替link时，href需要填写完整的路径，比如<a href='\#/about'>

*  页面默认打开是http://localhost:3000/\#/，怎么设置能够使链接为http://localhost:3000呢

HashRouter路由模式使用hash来实现，可以参考MDN文档：[Location.hash][]；不使用hash模式可以使用BrowserRouter来代替HashRouter。

但是建议用HashRouter，虽然有\#，但是缓存比较强大。如果用BrowserRouter，页面内的按钮点击进入另外一个页面，再返回虽然有缓存，但是从导航栏内点击，页面刷新，缓存丢失

*  学习网址：[https://zhuanlan.zhihu.com/p/25081540][https_zhuanlan.zhihu.com_p_25081540]
 *  代码查看：[https://github.com/vifird/react-keeper][https_github.com_vifird_react-keeper]
 *  React-Keeper实现页面跳转学习文档：[https://github.com/vifird/react-keeper/blob/master/docs/Control.md][https_github.com_vifird_react-keeper_blob_master_docs_Control.md]
 *  **index** : 入口组件
    
    **miss** : 地址不匹配时渲染的组件
    
    **cache** : 缓存标记
    
    **redirect** : 重定向地址 (当组件满足渲染条件时才会执行)
    
     
    
    **path** : 匹配地址规则
    
    **component** ：要匹配的组件
    
    **loadComponent** : 动态加载组件
    
    **enterFilter** : 挂载过滤器
    
    **leaveFilter** : 卸载过滤器
    
    **offDirtyCheck** : 关闭脏检查。React-Keep会默认启用脏检查，以避免地址变更时不必要的渲染
 *  是否保存缓存需要定义cache:

`cache` tag supports two values: `root`(default), `parent`.  
`cache='root'`( or `cache` ) will cache a page always, the page will be cached until the Router is unmounted.  
`cache='parent'` will cache a page temporarily, the page will be cached until it's parent component is unmounted.

*  实践操作：

App.js

import React, { Component } from 'react';
    import Home from './Home';
    import About from './About';
    import './App.css';
    import { HashRouter, Route, CacheLink } from 'react-keeper'
    class App extends Component {
      render() {
        return (
            <HashRouter>
                <div>
                    <ul>
                        <li>
                            <CacheLink to='/'>Home</CacheLink>
                        </li>
                        <li>
                            <CacheLink to='/about'>About</CacheLink>
                        </li>
                    </ul>
                    <Route miss index cache component={Home} />
                    <Route cache path='/about' component={About} />
                </div>
            </HashRouter>
        );
      }
    }
    export default App;

Home.js

import React, { Component } from 'react';
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    import { Control } from 'react-keeper'
    const data = [
        { name: 'Sporting', price: '$49.99' },
        { name: 'Sporting', price: '$9.99' },
        { name: 'Sporting', price: '$29.99' },
        { name: 'Electronics', price: '$99.99' },
        { name: 'Electronics', price: '$399.99' },
        { name: 'Electronics', price: '$199.99' }
    ];
    export default class Home extends Component {
        constructor(props) {
            super(props);
            this.goto = this.goto.bind(this);
        }
        goto() {
            Control.go("/about");
        }
        render() {
            return (
                <div>
                    <ReactTable
                        data={data}
                        filterable
                        defaultFilterMethod={(filter, row) =>
                            String(row[filter.id]) === filter.value}
                        columns={[
                            {
                                Header: "Name",
                                columns: [
                                    {
                                        Header: "name",
                                        accessor: "name",
                                        sortable: false,
                                        filterMethod: (filter, row) => {
                                            if (filter.value === "all") {
                                                return true;
                                            }
                                            if (filter.value === "Sporting") {
                                                return row[filter.id] === 'Sporting';
                                            }
                                            return row[filter.id] === 'Electronics';
                                        },
                                        Filter: ({ filter, onChange }) =>
                                            <select
                                                onChange={event => {
                                                    onChange(event.target.value);
                                                }}
    
                                                style={
       { width: "100%" }}
                                                value={filter ? filter.value : "all"}
                                            >
                                                <option value="all">Show All</option>
                                                <option value="Sporting">Sporting</option>
                                                <option value="Electronics">Electronics</option>
                                            </select>
                                    }
                                ]
                            },
                            {
                                Header: "Name",
                                columns: [
                                    {
                                        Header: "name",
                                        accessor: "name",
                                        sortable: false,
                                        filterable: false,
                                        Cell: props => {
                                            return (
                                                <div>
                                                    <span onClick={this.goto}>about</span>
                                                </div>
                                            )
                                        },
                                    }
                                ]
                            },
                        ]}
                        defaultPageSize={10}
                        className="-striped -highlight"
                    />
                </div>
            )
        }
    }

About.js

import React, { Component } from 'react';
    import { Control } from 'react-keeper'
    export default class About extends Component {
        render() {
            return (
                <div>
                    <h1>关于</h1>
                    <button onClick={() => { Control.go(-1); }}>return</button>
                </div>
            )
        }
    }

*  实际操作完整代码，复制就能用

index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { HashRouter } from 'react-keeper'
    ReactDOM.render(
        <HashRouter>
          <App />
        </HashRouter>, document.getElementById('root')
    );
    serviceWorker.unregister();

App.js

import React, { Component } from "react";
    import "./App.css";
    import Home from "./Home";
    import About from './About'
    import Contact from './Contact'
    import {Route} from 'react-keeper'
    import { Menu, Dropdown } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    class App extends Component {
    	render() {
    		return (
    				<div>
    					<Menu fixed="top" style={
       {position:'relative'}}>
    						<Menu.Item as="a" href='/'>Home</Menu.Item>
    						<Dropdown item simple text="User">
    							<Dropdown.Menu>
    								<Dropdown.Item as="a" href="/#/about">
    									About
                                    </Dropdown.Item>
    							</Dropdown.Menu>
    						</Dropdown>
    					</Menu>
    					<div className="content">
    						<Route miss index cache path="/" component={Home} />
    						<Route cache='parent' path="/about" component={About} />
                            <Route cache='parent' path="/contact" component={Contact} />
    					</div>
    				</div>
    		);
    	}
    }
    export default App;

Home.js

import React, { Component } from 'react';
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    import { Control } from 'react-keeper'
    const data = [
        { name: 'Sporting', price: 4 },
        { name: 'Sporting', price: 2 },
        { name: 'Sporting', price: 1 },
        { name: 'Electronics', price: 3 },
        { name: 'Electronics', price: 6 },
        { name: 'Electronics', price: 5 }
    ];
    export default class Home extends Component {
        constructor(props) {
            super(props);
            this.goto = this.goto.bind(this);
        }
        goto() {
            Control.go("/contact");
        }
        render() {
            return (
                <div>
                    <ReactTable
                        data={data}
                        filterable
                        defaultFilterMethod={(filter, row) =>
                            String(row[filter.id]) === filter.value}
                        columns={[
                            {
                                Header: "Name",
                                columns: [
                                    {
                                        Header: "name",
                                        accessor: "name",
                                        sortable: false,
                                        filterMethod: (filter, row) => {
                                            if (filter.value === "all") {
                                                return true;
                                            }
                                            if (filter.value === "Sporting") {
                                                return row[filter.id] === 'Sporting';
                                            }
                                            return row[filter.id] === 'Electronics';
                                        },
                                        Filter: ({ filter, onChange }) => {
                                            return (<select
                                                onChange={event => {
                                                    onChange(event.target.value);
                                                }}
    
                                                style={
       { width: "100%" }}
                                                value={filter ? filter.value : "all"}
                                            >
                                                <option value="all">Show All</option>
                                                <option value="Sporting">Sporting</option>
                                                <option value="Electronics">Electronics</option>
                                            </select>)
                                        }
                                    }
                                ]
                            },
                            {
                                Header: "price",
                                columns: [
                                    {
                                        Header: "price",
                                        accessor: "price",
                                        filterMethod: (filter, row) => {
                                            return row[filter.id].toString().includes(filter.value);
                                        }
                                    }
                                ]
                            },
                            {
                                Header: "button",
                                columns: [
                                    {
                                        Header: "button",
                                        sortable: false,
                                        filterable: false,
                                        Cell: props => {
                                            return (
                                                <div>
                                                    <span onClick={this.goto}>Contact</span>
                                                </div>
                                            )
                                        },
                                    }
                                ]
                            },
                        ]}
                        defaultPageSize={10}
                        className="-striped -highlight"
                    />
                </div>
            )
        }
    }

About.js

Contact.js

import React, { Component } from 'react';
    import { Control } from 'react-keeper'
    export default class About extends Component {
        render() {
            return (
                <div>
                    <h1>contact us</h1>
                    <button onClick={() => { Control.go(-1); }}>return</button>
                </div>
            )
        }
    }

[http_localhost_3000]: http://localhost:3000
[Location.hash]: https://developer.mozilla.org/zh-CN/docs/Web/API/Location
[https_zhuanlan.zhihu.com_p_25081540]: https://zhuanlan.zhihu.com/p/25081540
[https_github.com_vifird_react-keeper]: https://github.com/vifird/react-keeper
[https_github.com_vifird_react-keeper_blob_master_docs_Control.md]: https://github.com/vifird/react-keeper/blob/master/docs/Control.md