React-Router实现链接间的跳转，解决页面缓存丢失问题

港控/mmm° 2022-04-04 02:58 359阅读 0赞

npm install react-router-dom --save
    npm install semantic-ui-css --save

注意点

页面跳转到上一頁面：this.props.history.goBack()

<Button basic onClick={() => { this.props.history.goBack() }}>
        <Icon name="reply"></Icon>
        Return to list
    </Button>

页面跳转到某一个页面：this.props.history.push("/about");

*  React-Rounter实现链接间的跳转

在src文件夹下面，创建一个文件夹home，下面创建一个home.js

import React, { Component } from 'react';
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    const selected = {};
    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() {
            this.props.history.push("/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: "button",
                                columns: [
                                    {
                                        Header: "button",
                                        sortable: false,
                                        filterable: false,
                                        Cell: props => {
                                            return (
                                                <div>
                                                    <span onClick={this.goto}>about</span>
                                                </div>
                                            )
                                        },
                                    }
                                ]
                            },
                        ]}
                        defaultPageSize={10}
                        className="-striped -highlight"
                    />
                </div>
            )
        }
    }

在src文件夹下面，创建一个文件夹about，下面创建一个about.js

import React, { Component } from 'react'
    class about extends Component {
        goHistory() {
            this.props.history.goBack()//返回到上一頁
        }
        render() {
            return (
                <div>
                    这是about页面
                    <button onClick={() => this.goHistory()}>页面跳转到上一頁面</button>
                </div>
            )
        }
    }
    export default about

在src文件夹下面，创建一个文件夹contact，下面创建一个contact.js

import React, { Component } from 'react'
    class about extends Component {
      render() {
        return (
            <div>这是about页面</div>
        )
      }
    }
    export default about

App.js

import React, { Component } from "react";
    import "./App.css";
    import Home from "./home";
    import About from './about'
    import Contact from './contact'
    import {
    	BrowserRouter as Router,
    	Route,
    	Link
    } from 'react-router-dom';
    import { Menu, Dropdown, Divider } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    class App extends Component {
    	render() {
    		return (
    			<Router>
    				<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.Item as="a" href="/contact">
    									Contact
                                    </Dropdown.Item>
    							</Dropdown.Menu>
    						</Dropdown>
    					</Menu>
    					<div className="content">
    						<Route exact path="/" component={Home} />
    						<Route path="/about" component={About} />
    						<Route path="/contact" component={Contact} />
    					</div>
    					{/* <Divider /> */}
    				</div>
    			</Router>
    		);
    	}
    }
    export default App;

*  解决页面缓存丢失问题

home.js：创建一个全局变量selected，然后在筛选操作中，将筛选的值赋给全局变量

因为es6的语法，filter必须返回一个值。所以最后一行必须有return，如果没有的话，那么会执行最后一行

当我们在最后一行赋值，值虽然获取到了，但是filter里面并不会返回值，相当于return false，所以不会执行筛选操作，需要将赋值放在前面

import React, { Component } from 'react';
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    const selected = {};
    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);
        }
        componentDidMount() {
            console.log('123')
            console.log(selected)
            // this.selected && this.props.selected.length <= 0 && this.props.getList.call(this);
        }
        goto() {
            this.props.history.push("/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) => {
                                            selected.sirenId = filter.value;
                                            console.log("--value: ", selected);
                                            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: "button",
                                columns: [
                                    {
                                        Header: "button",
                                        sortable: false,
                                        filterable: false,
                                        Cell: props => {
                                            return (
                                                <div>
                                                    <span onClick={this.goto}>about</span>
                                                </div>
                                            )
                                        },
                                    }
                                ]
                            },
                        ]}
                        defaultPageSize={10}
                        className="-striped -highlight"
                    />
                </div>
            )
        }
    }