番茄闹钟二(引入react-router)

1. 安装 react-router

yarn add react-router-dom
yarn add @types/react-router-dom // 引入声明类型文件

2. 引入 react-router

    import React from 'react'import './App.css'import {BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams} from 'react-router-dom'function Home() {return <h2>Home</h2>}function About() {return <h2>About</h2>}function Topics() {let match = useRouteMatch()return (<div><h2>Topics</h2><ul><li><Link to={`${match.url}/components`}>Components</Link></li><li><Link to={`${match.url}/props-v-state`}>Props v. State</Link></li></ul>{/* The Topics page has its own <Switch> with more routesthat build on the /topics URL path. You can think of the2nd <Route> here as an "index" page for all topics, orthe page that is shown when no topic is selected */}<Switch><Route path={`${match.path}/:topicId`}><Topic/></Route><Route path={match.path}><h3>Please select a topic.</h3></Route></Switch></div>)}function Topic() {let {topicId} = useParams()return <h3>Requested topic ID: {topicId}</h3>}export default function App() {return (<Router><div><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/topics">Topics</Link></li></ul><Switch><Route path="/about"><About/></Route><Route path="/topics"><Topics/></Route><Route path="/"><Home/></Route></Switch></div></Router>)}

3. 路由的基本引入

  // App.tsximport React from 'react'import './App.css'import {BrowserRouter as Router, Route} from 'react-router-dom'import Login from "./components/Login/Login"import SignUp from "./components/SignUp/SignUp"import Index from './components/Index/Index'class Component extends React.Component  {public render(){return (<Router><div><Route exact={true} path="/" component={Index}/><Route path="/login" component={Login} /><Route path="/signUp" component={SignUp} /></div></Router>)}}export default Component// index.tsximport * as React from 'react';class Component extends React.Component {public render() {return (<div className="Component">Index</div>)}}export default Component

4. Index 页面跳转到登录页面

import * as React from 'react';
import { Button } from 'antd';interface Irouter {history: any
}// router 给 Index 传 props 属性, 要声明 props 的类型,也可以直接声明一个接口
class Component extends React.Component<Irouter> {login = ()=>{this.props.history.push('/login')}render() {return (<div className="Component"><Button onClick={this.login}>登录</Button></div>)}
}export default Component

5. withRouter 的用法

index 是直接通过 Router 组件传过来的值，所以会带有 props.history,如果不是通过 Router 渲染出来的路由,也想知道当前的路由信息，那么必须要用到 withRouter 的组件，

6. BrowserRouter 和 HashRouter 的区别


# 后面相当于就是个 hashbrowser 的坏处是，如果用 BrowerRouter,部署到服务器上输入
http://localhost:3000/login可能会找不到,只能找到http://localhost:3000/,
因为这个是个单页面应用，单页应用只是映射到 index 上面，login 的话可能会返回 404,如果使用 browserrouter,
必须要配置服务器把http://localhost:3000/下的所有路径指向index这个入口文件

最后,个人微信,欢迎交流！

番茄闹钟二(引入react-router)相关推荐

react+Typescript+svg仿番茄闹钟
仿番茄土豆的线上webApp 前言这次项目重点体验typescript与react的结合,直接使用官方脚手架create-react-app搭建环境. 项目中数据统计图形使用HTML5的Svg展示. ...
react router教程
react router教程文章目录 react router教程 1:安装 2:配置路由 3:添加一个新页面测试路由 4:配置未找到的路由 5:跳转页面 5.1:通过 js 5.2:通过 dom ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...
react引入多个图片_重新引入React：v16之后的每个React更新都已揭开神秘面纱。
react引入多个图片 In this article (and accompanying book), unlike any you may have come across before, I w ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
elementui的css文件没有引入_为什么每个React组件都需要引入React？
回顾react的一般使用场景如下所以所以,经常我们在开发项目的时候,创建每一组件,组件的第一行都会引入React,然而发现并没有使用过它. import React, { Component } f ...

番茄闹钟二(引入react-router)

1. 安装 react-router

2. 引入 react-router

3. 路由的基本引入

4. Index 页面跳转到登录页面

5. withRouter 的用法

6. BrowserRouter 和 HashRouter 的区别

最后,个人微信,欢迎交流！

番茄闹钟二(引入react-router)相关推荐

最新文章

热门文章