React路由 react-router-dom

React的路由：

首先我们创建一个React应用

npm install -g create-react-app
create-react-app demo-app
cd demo-app

安装路由

npm install react-router-dom
npm add @babel/runtime

接下来，将以下任一示例复制/粘贴到中`src/App.js`。

第一个示例：基本路由

在此示例中，路由器处理了3个“页面”：主页，“关于”页面和“用户”页面。在不同的<Link>s 上单击时，路由器将呈现匹配项<Route>。

注意：在幕后，<Link>会<a>使用real 渲染一个href，因此使用键盘进行导航或屏幕阅读器的人仍然可以使用此应用。

import React from "react";
import {BrowserRouter as Router,Switch,Route,Link
} from "react-router-dom";export default function App() {return (<Router><div><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/users">Users</Link></li></ul></nav>{/* A <Switch> looks through its children <Route>s andrenders the first one that matches the current URL. */}<Switch><Route path="/about"><About /></Route><Route path="/users"><Users /></Route><Route path="/"><Home /></Route></Switch></div></Router>);
}function Home() {return <h2>Home</h2>;
}function About() {return <h2>About</h2>;
}function Users() {return <h2>Users</h2>;
}

←运行结果

React路由 react-router-dom相关推荐

16、React系列之 React 路由
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain 地址:http://www.jianshu.com/p/b55cf53e633a 本文出自 Ti ...
React路由配置：React Router
官方文档地址: https://reacttraining.com/react-router/web/api/Route/component 里面都有详细的react路由配置,还有代码演示. 1.安装 ...
React路由管理 —— React Router 总结
React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢, ...
React 路由报错 You should not use Route or withRouter() outside a Router
App.js在中的代码 import React, {Component , Fragment} from 'react'; import {withRouter , Route , Switch , ...
RN和React路由详解及对比
前言在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
rn php,RN和React路由详解及对比
前言在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
React路由V6技术文档
React Router 6 快速上手 1.概述 React Router 以三个不同的包发布到 npm 上,它们分别为: react-router: 路由的核心库,提供了很多的:组件.钩子. rea ...
react 路由重定向_如何测试与测试库的路由器重定向React
react 路由重定向 React testing-library is very convenient to test React components rendering from props, ...
React 路由 V6
React 路由概述安装路由引入路由的使用 HashRouter BrowserRouter Routes 与 Route Link NavLink Navigate Outlet 新增 Ho ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...

React路由 react-router-dom

React的路由：

安装路由

接下来，将以下任一示例复制/粘贴到中`src/App.js`。

第一个示例：基本路由

React路由 react-router-dom相关推荐

最新文章

热门文章

React路由 react-router-dom

React的路由：

安装路由

接下来，将以下任一示例复制/粘贴到中src/App.js。

第一个示例：基本路由

React路由 react-router-dom相关推荐

最新文章

热门文章

接下来，将以下任一示例复制/粘贴到中`src/App.js`。