zoukankan      html  css  js  c++  java
  • React路由

    3.React路由

    npm i react-router-dom

    0.路由器

    BrowserRouter 和 HashRouter
    需在整个APP外层包裹一个路由器才能正常使用注册路由

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

    1.基本使用

    import {Link, Route} from "react-router-dom";
    
    {/*原生React中,靠路由链接实现切换组件---编写路由链接*/}
    <Link className="list-group-item" to='/about'>About</Link>
    
    {/*  注册路由 绑定组件  */}
    <Route path='/about' component={About}/>
    

    2.NavLink的使用

    import {Route, NavLink} from "react-router-dom";
    <NavLink activeClassName='navbar' className="list-group-item" to='/about'>About</NavLink>
    {/*  注册路由 绑定组件  */}
    <Route path='/about' component={About}/>
    
    

    3.NavLink封装
    之后直接使用MyNavLink即可

    import React, {Component} from 'react';
    import {NavLink} from "react-router-dom";
    
    class MyNavLink extends Component {
        render() {
            console.log(this.props)
            const {title} = this.props
            return (
                <div>
                    <NavLink activeClassName='navbar' className="list-group-item" {...this.props}/>
                </div>
            );
        }
    }
    
    export default MyNavLink;
    

    4.Switch的使用

    import {Route, Switch} from "react-router-dom";
    {/*  Switch标签保证匹配到路由就不再往下匹配,只显示最前面的那个  */}
    <Switch>
        <Route path='/about' component={About}/>
        <Route path='/home' component={Home}/>
        <Route path='/home' component={Test}/>
    </Switch>
    

    5.解决样式丢失问题

    在index.html里引入外部样式时容易引起

    <!--    <link rel="stylesheet" href="./css/bootstrap.css" />-->
    <!--   解决样式丢失问题, 把前面的点去掉 -->
        <link rel="stylesheet" href="/css/bootstrap.css" />
    <!--   或者前面加 %PUBLIC_URL% -->
    <!--    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" />-->
    

    6.精准匹配

    <MyNavLink to='/about'>About</MyNavLink>
    <MyNavLink to='/home/a/b'>Home</MyNavLink>
    
    <Switch>
        {/* exact 开启严格匹配 路径与路由一致 */}
        <Route exact={true} path='/about' component={About}/>
        <Route exact path='/home' component={Home}/>
    </Switch>
    

    无法匹配到链接为/home/a/b的路由

    7.Redirect使用

    import {Route, Switch, Redirect} from "react-router-dom";
    
    <Switch>
        {/* exact 开启严格匹配 路径与路由一致 */}
        <Route path='/about' component={About}/>
        <Route path='/home' component={Home}/>
         {/* 匹配不到默认跳到/about */}
        <Redirect to='/about' />
    </Switch>
    
  • 相关阅读:
    kubernetes概述
    pygame--图形模块
    iPhone 上你可能还不知道的小技巧
    使用 JdbcTemplate 查询数据时报错:列名无效(已解决)
    【分享】怎样做架构师?
    关于 oh-my-zsh 插件的使用(以 Sublime Text 为例)
    VI/VIM 无法使用系统剪贴板(clipboard)?(Ubuntu&Mac OS X已解决)
    Ubuntu 下 Sublime 无法输入中文?(已解决)
    VIM 的帮助文档在哪里?看这里。
    推荐一款好用的文件/文件夹对比工具 —— Beyond Compare
  • 原文地址:https://www.cnblogs.com/guapitomjoy/p/15223734.html
Copyright © 2011-2022 走看看