到达路由器教程

在React应用中使用Reach Router的快速入门

在上一个项目中,我使用了到达路由器我认为这是在React应用程序中进行路由的最简单方法。

我认为比这容易得多反应路由器,这是我过去使用的另一台路由器。

这是一个5分钟的教程,以了解其基础知识。

安装

首先,使用安装

npm install @reach/router

如果@语法对您来说是新的,它是一个npm功能,允许有作用域的程序包。换句话说,一个名称空间。

接下来,将其导入您的项目中。

import { Router } from '@reach/router'

基本用法

我在顶级React文件中使用它,index.js在一个创建反应应用安装,包装要显示的所有组件:

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

path我添加到组件的属性允许我为它们设置路径。

换句话说,当我在浏览器URL栏中键入该路径时,“到达路由器”会向我显示该特定组件。

/path是索引路由,当您未在应用程序域旁边设置URL /路径时显示。换句话说,就是“主页”。

默认路线

当用户访问与任何路由都不匹配的URL时,默认情况下,“到达路由器”会将其重定向到/路线。您可以添加一个default路由处理这种情况并显示一条很好的“ 404”消息:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

以编程方式更改路线

使用navigate功能以编程方式更改您应用中的路线:

import { navigate } from '@reach/router'
navigate('/private-area')

使用Link组件以使用JSX链接到您的路线:

import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

网址参数

使用添加参数:param句法:

<Router>
  <User path="users/:userId" />
</Router>

现在,在这个假设的用户组件中,我们可以userId作为道具:

const User = ({ userId }) => (
  <p>User {userId}</p>
)

嵌套路线

我向您展示了如何在顶级React文件中以这种方式定义路由:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

您可以定义嵌套路线:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

所以现在您可以拥有/private-area/23232链接指向用户组件,并传递userId 23232

您还可以选择允许组件在其中定义其自己的路线。您使用/*路由后的通配符:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

然后,您可以在组件内部再次导入Router,并定义其自己的子路由集:

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

任何路线使用/private-area/something将由User组件处理,路线之后的部分将作为其组件发送userId支柱。

为了显示一些东西/private-area现在,您还需要添加一个/中的处理程序PrivateArea成分:

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

免费下载我的反应手册


更多反应教程: