Remix 简介与安装

Remix JS 是一个基于全栈React的框架，允许你在服务器上渲染代码，这通常比在客户端上使用React具有更好的性能和搜索引擎优化。但是Next Js已经提供了服务器端渲染，那么Remix Js与Next Js有何不同？Remix Js只支持服务器端渲染，并不支持Next Js的静态站点生成和增量静态再生的能力。它相比于Next Js提供了更快的开发速度，因为它使用的是esbuild而不是webpack。

Remix JS的主要特点：

路由： 它支持基于文件结构的路由，构建在React Router的基础上。它还允许你创建嵌套路由。在Remix Js中，嵌套路由会继承其UI组件自父级路由。如果你使用过Angular或Ember.js等框架，你可能会认出这种模式。
数据获取： 在任何给定的路由中，你可以导出一个用于前端UI的React组件。但是你也可以定义一个加载器函数，在服务器上获取数据并将其发送到前端。你的React组件可以使用useLoaderData hook来访问获取的数据。
错误处理： 大多数错误在你的代码、服务器端或浏览器中都会被Remix自动捕获，并且会渲染最接近错误发生位置的错误边界。
便捷访问标签和文档：任何路由模块都可以轻松地访问head标签。在head标签中，你可以轻松地添加meta标签、描述和CSS链接等。
Typescript支持： 你可以直接使用typescript，可以轻松生成带有typescript的样板应用。
内置支持Cookie： Remix提供了一个名为createCookie的内置函数用于处理cookie。

安装和运行Remix JS应用的步骤：

步骤1： 在创建Remix应用之前，请确保已安装node.js和npm。你可以从这里安装node.js。通过运行这些命令来确认安装。

npm -v
node -v

步骤2: 现在创建一个新文件夹，并在终端中导航到该文件夹。运行以下命令来创建一个带有最新版本的Remix应用。

npx create-remix@latest

步骤3： 在安装过程中，您将被提示选择一个服务器。继续选择一个您熟悉的服务器。

Remix 简介与安装

步骤4： 输入您想要使用的编程语言（Javascript/TypeScript），然后继续安装。

Remix 简介与安装

步骤5： 当我们在代码编辑器中打开我们的项目时，我们会看到一个相当简单的项目结构。就目前而言，我们只关注app文件夹，因为它包含大部分应用程序。我们将进一步通过向我们的项目添加一些基本路由来推动事物发展。Remix Js支持基于文件结构的路由，这意味着在路由目录中的任何文件可以使用相对于路由目录的路径来访问。在routes目录中创建一个名为 users 的新文件夹，然后在该文件夹中创建两个名为index.jsx和$id.jsx的新文件。

项目结构：

Remix 简介与安装

示例： 在此处，index.jsx文件将包含一个组件，当您导航到localhost:3000/users时将渲染该组件。而 $id.jsx是一个动态路由。如果您熟悉Next Js，您可能知道对于动态路由，我们在文件名中使用下标运算符（例如：[id].js）。这里有点不同。如果在路由名称前面放置一个$ 符号（$id.jsx），则将被视为动态路由。而为了访问动态id，Remix Js提供了一个名为 useParams() 的hook。

/app/routes/users/index.jsx文件：

Javascript

const Users = () => { 
    return ( 
      <h1>All Users</h1> 
    ) 
  } 
    
  export default Users

/app/routes/users/$id.jsx文件：

Javascript

import { useParams } from "remix"; 
  
const User = () => { 
  
  // To access all the parameters 
  // in the route 
  const params = useParams(); 
  
  // Destructuring id from params. 
  const id = params.id; 
  
  return <h1>User with id : {id}</h1>; 
}; 
  
export default User;

运行应用程序的步骤： 打开终端并输入以下命令。