react 路由完整版「建议收藏」

react 路由完整版「建议收藏」import{BrowserRouter}from’react-router-dom’1、用BrowserRouter管理整个应用 在index.js中,将<App/>用<BrowserRouter>包裹起来2、路由跳转 import{NavLink,Link}from’react-router-dom’ NavLink和Link都可以实现,且用法相同 <NavLinkto=’/about’>About</NavLink&g

大家好,又见面了,我是你们的朋友全栈君。

cnpm install -S  react-router-dom@4.3.1

1、用BrowserRouter管理整个应用
	import {BrowserRouter} from 'react-router-dom'
	
	在index.js中,将<App />用<BrowserRouter>包裹起来,内部只能有一个根容器

2、路由跳转
	import {NavLink,Link} from 'react-router-dom'
		NavLink和Link都可以实现,且用法相同
		
		<NavLink to='/about'>About</NavLink>
    	<NavLink to='/home'>home</NavLink>
    	
3、路由显示(放在哪就在哪显示)
	import {Switch,Route,Routes} from 'react-router-dom'
		Switch:重复路径只匹配第一个
		Routes:v6版本用来替代Switch
		exact:精准匹配,一般放置在根路由,当'/'和'/xx',将exact放置在'/'路由上,访问'/xx'不会显示'/'
		strict:严格匹配,即'/main'和'/mian/'不一样
	
	<Route exact path='/' component={Home}></Route>
	<Route path='/about' component={About}></Route>

4、路由重定向
    import {Redirect} from 'react-router-dom'
    	不能放置在路由显示的第一个位置,否则无法触发
    	打开页面浏览器会自动重定向到'/about'路由  
    <Redirect to='/about'></Redirect>
    <Redirect from='/当前路由' to='/指定路由'> 从当前路由跳转到指定路由
    
    	其中在动态使用重定向需要return
    		        if(xx)
			        {
			            return <Redirect to={redirectTo}></Redirect>
			        }

    		
  
5、路由高亮选中样式
	<NavLink to='/home' activeClassName="selected">home</NavLink>
		封装标签后:
			在标签上使用 {...this.props}  能将组件传递的参数/样式,全部放进标签上

6、路由嵌套
	父路由:
		NavLink指定跳转链接,路径要加上父路由的路径,'/x/xx'
		Switch和Route指定子路由显示位置
		Redirect对子路由重定向

7、路由跳转携带参数
	参数传递以及参数名设置
		NavLink中:to={to='/home/msg/detail/参数'},变量使用{`${}`}或字符串拼接
		Route中:path='/home/msg/detail/:接收参数名?'
			‘?’号表示为可选参数
		
	调用参数:
		this.props.match.params.参数名

8、动态跳转
	this.props.history.push('路径'') /('路径',{参数键值对})
	this.props.history.replace('xx')
	this.props.history.go(数值);  根据栈来跳转
	this.props.history.goBack();
	this.props.history.goForward();
	
	方式一:
		<Route path='/home/msg/detail/:id' component={Detail}> </Route>
		回调中:this.props.history.push('/home/msg/detail/5')
		接收:{this.props.match.params.id}
		
	方式二:
		回调中:this.props.history.push('/home/msg/detail',{id:5})
		接收:{this.props.location.state.id}
		
9、获取当前路由的url('/xx')
		this.props.location.pathname;
		
10、非路由组件使用路由组件属性(props.history等)
		import {withRouter} from 'react-router-dom'
		最后导出组件:export default withRouter(组件);
		
11、离开页面弹窗
		import {Prompt} from 'react-router-dom'
		
		<Prompt 
			when={触发条件}   不写,则离开当前页面时触发弹窗
			message='弹窗内容' / {(location)=>{ 可以通过函数返回内容 }}
		/>

代码示例:
index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { 
   BrowserRouter} from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js:

import React from 'react';
import './App.css';
import About from './views/about'
import Home from './views/home'
import { 
   NavLink,Switch,Route,Link,Redirect} from 'react-router-dom'

import CADD from './components/comment_add/commentAdd.jsx';
import CAI from './components/comment_list/commentList';
class App extends React.Component{ 
   
  state={ 
   
    searchName:''
  }

  setName=(searchName)=>{ 
   
    this.setState({ 
   
      searchName:searchName
    });

  }
  render()
  { 
   
    
    return(
      
      <div>
        <NavLink to='/about' activeClassName="selected" >About</NavLink>
        <NavLink to='/home'  activeClassName="selected">home</NavLink>

          <div>
            <Switch>
              <Route path='/about' component={ 
   About} ></Route>
              <Route path='/home' component={ 
   Home}></Route>
              <Redirect to='/about'></Redirect>
            </Switch>
          </div>
      </div>
    )
  }

}

export default App;


子路由:

import React,{ 
    Component } from "react";
import { 
   NavLink,Route,Redirect,Switch} from 'react-router-dom'
import News from './news';
import Msg from './msg';
import './home.css';

export default class App extends Component{ 
   
    
    render()
    { 
   
        return(
            <div>
                <div>
                    <NavLink to='/home/news' activeClassName='selected2'>news</NavLink>
                    <NavLink to='/home/msg' activeClassName='selected2'>msg</NavLink>
                </div>

                <Switch>
                    <Route path='/home/news' component={ 
   News}></Route>
                    <Route path='/home/msg' component={ 
   Msg}></Route>
                    <Redirect to='/home/news'></Redirect>
                </Switch>

            </div>
        )
    }
}

子子路由:

import React,{ 
    Component } from "react";
import { 
   NavLink,Route,Redirect,Switch} from 'react-router-dom'
import './home.css';
import Detail from './detail';

export default class App extends Component{ 
   
    
    render()
    { 
   
        return(
            <div>
                <ul>
                    <NavLink activeClassName='selected2'to='/home/msg/detail/1'>msg1</NavLink>
                    <NavLink activeClassName='selected2'to='/home/msg/detail/2'>msg2</NavLink>
                    <NavLink activeClassName='selected2'to='/home/msg/detail/3'>msg3</NavLink>
                </ul>
                <button onClick={ 
   this.back}>返回</button>
                <button onClick={ 
   this.go}>前进</button>
                <div>
                    <Switch>
                        <Route path='/home/msg/detail' component={ 
   Detail}> </Route>
                    </Switch>
                </div>

            </div>
           
        )
    }
    back=()=>{ 
   
        this.props.history.push('/home/msg/detail',{ 
   id:5})
    }
    go=()=>{ 
   

    }
}

子子子路由:

import React,{ 
    Component } from "react";

export default class App extends Component{ 
   
    
    render()
    { 
   
        return(
            <div>
                { 
   /* <li>{this.props.match.params.id}</li> */}
                <li>{ 
   this.props.location.state.id}</li>

            </div>
        )
    }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130459.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Alex 的 Hadoop 菜鸟教程: 第1课 hadoop体系介绍

    Alex 的 Hadoop 菜鸟教程: 第1课 hadoop体系介绍介绍hadoop的体系,对hadoop庞大的生态圈进行了介绍,并标出了学习的优先级。简单明了的介绍,看了不晕

  • I bumped into a girl literally_back and forth

    I bumped into a girl literally_back and forthhttp://acm.hznu.edu.cn/OJ/problem.php?cid=1263&amp;pid=6http://acm.hznu.edu.cn/OJ/problem.php?id=2585题意:每天能往存钱罐加任意实数的钱,每天不能多于起那一天放的钱数。如果某一天的钱数恰好等于那天的特价商品,则可以买,求最后的最大快乐值。题解:显然的贪心:如果第i天买完,准备在第…

    2022年10月23日
  • java线程池 面试题(精简)

    java线程池 面试题(精简)什么是线程池?线程池是一种多线程处理形式,处理过程中将任务提交到线程池,任务的执行交由线程池来管理。如果每个请求都创建一个线程去处理,那么服务器的资源很快就会被耗尽,使用线程池可以减少创建和销毁线程的次数,每个工作线程都可以被重复利用,可执行多个任务。 为什么要使用线程池?创建线程和销毁线程的花销是比较大的,这些时间有可能比处理业务的时间还要长。这样频繁的创建线程和销毁线程,再…

  • python抢淘宝的东西-Python 实现毫秒级淘宝抢购脚本的示例代码

    python抢淘宝的东西-Python 实现毫秒级淘宝抢购脚本的示例代码本篇文章主要介绍了Python通过selenium实现毫秒级自动抢购的示例代码,通过扫码登录即可自动完成一系列操作,抢购时间精确至毫秒,可抢加购物车等待时间结算的,也可以抢聚划算的商品。博主不提供任何服务器端程序,也不提供任何收费抢购软件。该文章仅作为学习selenium框架的一个示例代码。该思路可运用到其他任何网站,京东,天猫,淘宝均可使用,且不属于外挂或者软件之类,只属于一个自动化点击工具,…

  • Android ListView 删除 item

    Android ListView 删除 item实现效果主要使用方法是,remove之后在刷新界面adapter里面的代码publicclassMyAdapterextendsBaseAdapter{privateList<ListBean>mDatas=null;privateContextmContext=null;publicMyAdapter(Contextcontext,List<ListBean>datas){

  • OWASP TOP10系列之#TOP1# A1-注入类「建议收藏」

    OWASP TOP10系列之#TOP1# A1-注入类「建议收藏」OWASPTOP10系列之#TOP1#注入类提示:本系列将介绍OWASPTOP10安全漏洞相关介绍,主要针对漏洞类型、攻击原理以及如何防御进行简单讲解;如有错误,还请大佬指出,定会及时改正~文章目录OWASPTOP10系列之#TOP1#注入类前言一、注入类漏洞是什么?二、什么情况下会产生注入类漏洞问题?三、如何预防?四、具体示例1.SQL注入2.OS命令注入3.XPath注入总结前言在OWASP(开放式Web应用程序安全项目)公布的10项最严重的Web应用程序安全风险列表的在

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号