React中路由的使用
在react中配置前端路由一般会使用react-router这个包,但是下V4版本之后,这个包针对不同的开发环境被拆分成了不同的包,在web中我们使用react-router-dom。
看示例代码:
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 and
renders 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>;
}
观察代码,步骤如下:
1、引入react-router-dom
2、从react-router-dom中导出需要使用的模块组件,这里面有:
a、路由最外层组件 Router
b、Switch包裹组件,作用是匹配路由后只渲染一个组件
c、Route站位组件,通常需要传递组件参数,有多种传递方式
d、Link导航组件,类似超链接。
3、结构布局,Router在最层,Switch在中间层包裹所有Route,Link放在导航部分,一般Link部分会放在页面中的公共部分。
上面三步基本基本能满足大部分React路由的需求了,但是这里面有需要大家注意的地方:
A、首先是路由的匹配是从上到下,也就是在switch包裹的Route中,先匹配/about,在匹配/users,在匹配/,代码中国如果没有switch,你无论访问哪个路由 /对应的组件都会显示,因为/匹配所有路由。
B、其次"/"Route所包裹的组件放在了所有路由组建的最后面,这是因为如果放在最前面,那么/about和/users就不会显示了,因为只要访问/*,都会被匹配到/路由,作者这里将其放在了所有的路由组件后面,其实这里还有另外一种使用方式,个/路由组件添加一个exact属性,这是精确匹配的意思,只用路由是/才能和这个路由匹配。
局部代码如下:
<Switch>
<Route exact={true} path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
</Switch>
这里面还有需要注意的地方是Route的使用,Route使用时需要向其内部传递组件,这里有三种方式,分别是children、component、render。
上面代码示例其实是第一种,Route标签包含需要被渲染的组件标签,接下来我们看第二种使用component,局部改造代码如下:
<Switch>
<Route path="/about" component={About}>
</Route>
<Route path="/users" component={Users}>
</Route>
<Route path="/" component={Home}>
</Route>
</Switch>
此时的效果和前面一样,只是写法不同而已,这里需要注意,children的优先级高于component。
再看第三种,render,代码如下:
<Switch>
<Route path="/about" render={() => { return <About />}}>
</Route>
<Route path="/users" render={() => { return <Users /> }}>
</Route>
<Route path="/" render={() => { return <Home /> }}>
</Route>
</Switch>
大家在使用时需要注意。
以上便是React中路由的使用,希望对你有所帮助。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法