Comments (1)
路由的使用步骤
import React from 'react';
import ReactDOM from 'react-dom';
// 1.先安装react-router-dom
// 2.导入BrowserRouter as Router,Route,Link
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 路由的基本使用
const First=()=><div>1233</div>
const App=()=>{
return (
// 3.使用Router包裹组件元素
<Router>
<div>
<h1>路由基础</h1>
{/* 4.使用Link设置路径入口 会被编译为a标签 */}
<Link to="/first">页面7</Link>
{/* 5.使用Route中path表示路径跳转,component 表示要展示的组件 Route写在哪,展示的内容就渲染在哪 */}
<Route path="/first" component={First}></Route>
</div>
</Router>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
路由执行过程
1.点击link组件(a标签),修改了浏览器地址栏中的url
2.React路由监听到地址栏中url的变化
3.React 路由内部遍历所有Router组件,使用路由规则(path)与pathname进行匹配
4.当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容
编程式导航:
通过JS代码来实现页面跳转
history是React路由提供的,用于获取浏览器历史记录的相关信息
push(path):跳转到某个页面,参数path表示要跳转的地址
go(n):前进或后退到某个页面,参数n表示前进或后退页面数量
class Login extends Component {
handleLogin = () => {
// 使用编程式导航实现页面之间的跳转
this.props.history.push('/home')
}
render() {...省略其他代码} }
在函数组件中使用
props.history.push("/home")
---"/home" 表示将要跳转的页面路径
from blogs.
Related Issues (20)
- cookie,sessionStorage,localStorage的区别 HOT 1
- React中的refs作用 HOT 1
- hash路由和history路由的区别,他们的优缺点是什么 HOT 1
- async和await的用法 HOT 1
- 为什么不推荐用数组index作为key值遍历?会产生什么样的效果? HOT 1
- 使用useState更新不同对象,react hooks是怎么区分更新哪一个的? HOT 1
- 项目中的数据流向,this.props的来源问题
- react模块化开发 HOT 1
- react跨页面传值有哪些方法 HOT 1
- 受控组件和非受控组件的区别 HOT 1
- reactnative与flutter的区别,如何选择 HOT 1
- react中有没有类似泛型的类型?怎么使用
- 事件的节流与防抖是什么 HOT 1
- 怎么让多个页面使用同一个函数
- http状态码总结 HOT 1
- 对象转换为数组的直接方式
- 研究arguments对象
- 一、怎样才能让select里的内容居中显示? 二、表单输入框placeholder的文字能换行么? 三、怎么解决移动端与pc端之间的色差问题? HOT 1
- 什么是函数重载 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blogs.