React学习笔记四

React-Router-Dom

首先需要安装路由的依赖库，注意名字为 react-router-dom

npm i react-router-dom -S

标签方式的实现路由控制

1、首先 index.js 里面为 组件包裹一个 BrowserRouter 或 HashRouter，两者区别在于地址栏有没有 # 的链接，这样保证整个项目里的路由都是同一个路由器管理

import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.querySelector('#root')
);

2、App.jsx 里面通过标签实现路由控制

import { Component } from 'react';
import { Link, Route } from 'react-router-dom';
import About from './views/About/About';
import Home from './views/Home/Home';
export default class App extends Component {
    render() {
        return (
            <div>
                {/* 点击跳转到对应路由 */}
                <NavLink to="/about" activeClassName="current">About</NavLink>
                <NavLink to="/home" activeClassName="current">Home</NavLink>
                {/* 使用switth可以提高匹配效率 */}
                <Switch>
                    {/* 根据不同的路由地址，显示对应的组件 */}
                    <Route path="/about" component={About} />
                    <Route path="/home" component={Home} />
                </Switch>
            </div>
        );
    }
}

Tips：解决二级路由刷新页面资源丢失的3种办法

1. public/index.html 里将 ./assets 类型的改为 /assets
2. public/index.html 里将 ./ 改为 %PUBLIC_URL%
3. public/index.html 里将 BrowserRouter 改为 HashRouter

路由重定向

import { Component } from 'react';
import { Link, Route, Redirect } from 'react-router-dom';
import About from './views/About/About';
import Home from './views/Home/Home';
export default class App extends Component {
    render() {
        return (
            <div>
                <NavLink to="/about" activeClassName="current">About</NavLink>
                <NavLink to="/home" activeClassName="current">Home</NavLink>
                <Switch>
                    <Route path="/about" component={About} />
                    <Route path="/home" component={Home} />
                    {/* 当所有路由都没有匹配上，会执行重定向 */}
                    <Redirect to="/about"/>
                </Switch>
            </div>
        );
    }
}

路由传参

1、向路由组件传递params参数

News组件

import Detail from './Detail/Detail';
export default class News extends Component {
    render() {
        return (
            <div>
                <Link to="/home/news/detail/001">新闻1</Link>
                <Link to="/home/news/detail/002">新闻2</Link>
                <Link to="/home/news/detail/003">新闻3</Link>
                {/* 通过冒号动态接收 */}
                <Route path="/home/news/detail/:id" component={Detail} />
            </div>
        );
    }
}

Detail组件

export default class News extends Component {
    render() {
        {/* 此处会接收到传递的参数 */}
        console.log(this.props.match.params);
        return <div>{this.props.match.params.id}</div>;
    }
}

2、向路由组件传递search参数

News组件

export default class News extends Component {
    render() {
        return (
            <div>
                <Link to="/home/news/detail/?id=001">新闻1</Link>
                <Link to="/home/news/detail/?id=002">新闻2</Link>
                <Link to="/home/news/detail/?id=003">新闻3</Link>
                <Route path="/home/news/detail" component={Detail} />
            </div>
        );
    }
}

Detail组件

export default class News extends Component {
    render() {
        console.log(this.props.location.search);
        return <div>Test</div>;
    }
}

3、向路由组件传递state参数，当清除浏览器记录后，会丢失数据

News组件

export default class News extends Component {
    render() {
        return (
            <div>
                <Link to={{ pathname: '/home/news/detail', state: { id: '001' } }}>新闻1</Link>
                <Link to={{ pathname: '/home/news/detail', state: { id: '002' } }}>新闻2</Link>
                <Link to={{ pathname: '/home/news/detail', state: { id: '003' } }}>新闻3</Link>
                <Route path="/home/news/detail" component={Detail} />
            </div>
        );
    }
}

Detail组件

export default class News extends Component {
    render() {
        console.log(this.props.location.state);
        return <div>Test</div>;
    }
}

编程式路由

1、压栈式跳转（有历史记录）

export default class News extends Component {
    linkTo = id => {
        this.props.history.push({ pathname: '/home/news/detail', state: { id } });
    };
    render() {
        return (
            <button onClick={() => this.linkTo('001')}>新闻1</button>
        );
    }
}

2、非压栈式跳转（直接替换，无历史记录）

export default class News extends Component {
    linkTo = id => {
        this.props.history.replace('/home/news/detail',{ id });
    };
    render() {
        return (
            <button onClick={() => this.linkTo('001')}>新闻1</button>
        );
    }
}

一般组件增加路由功能

import { withRouter } from 'react-router-dom';
class Test extends Component {
    go = () => {
        console.log(this.props)
    };
    render() {
        return <button onClick={() => this.go}>新闻1</button>
    }
}
export default withRouter(Test)