React路由，如何理解和使用StaticRouter静态路由？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

继续苏南大叔的React路由话题，本文讨论的主要内容是React路由中相对不常见的StaticRouter。它不常见的主要原因是它的定位是运行在服务器端的路由方式，而这就关联着React程序的服务器端渲染的问题了，所以就相对就不常见了。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

定位服务器端

Static Router定位是服务器端的React程序的路由方式，所以，它的代码引入也和其它路由有所不同。注意【/server】字样。

import { StaticRouter } from "react-router-dom/server";

按照以前的惯例写法的话，也可以把StaticRouter重命名为Router。

import { StaticRouter as Router } from "react-router-dom/server";

非服务端也可以运行

其实如果不搭配http服务器的话，纯客户端里面这个StaticRouter也是可以正常运行的，这可能比较颠覆大家的认知。StaticRouter和普通常见的BrowserRouter的使用姿势，基本上一致。只不过，StaticRouter会根据location属性来选择某条Route进行渲染。

import { Routes, Route, useParams } from "react-router-dom";
import { StaticRouter } from "react-router-dom/server";
function Post () {
  var { id } = useParams();
  return <div>{id}号文章</div>;
};
function App() {
  return (
    <StaticRouter location={"/post/5"} context={{}}>
      <div className="App">
        <Routes>
          <Route path="/" element={<div>index</div>} />
          <Route path="/post/:id" element={<Post />} />
        </Routes>
      </div>
    </StaticRouter>
  );
}
export default App;

物理联系

！！！关键点就是StaticRouter的location属性！！！对应服务器端的req.url！！！

搭配http服务器

下面的代码，改编自react router官方的范例。原地址：

• https://reactrouter.com/en/6.4.0/router-components/static-router

代码如下：

import http from "http";
import * as React from "react";
import * as ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import { Routes, Route, useParams } from "react-router-dom";
function Post() {
  var { id } = useParams();
  return <div>No.{id} article</div>;
}
function requestHandler(req, res) {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <Routes>
        <Route path="/" element={<div>home</div>} />
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </StaticRouter>
  );
  res.write(html);
  res.end();
}
http.createServer(requestHandler).listen(3006);

当然，正常来说，这个代码执行是不能执行的，传统方式失败（包括webpack）。这里就先临时提一句：可以执行的手段最简单的方式如下所示，使用esno执行.jsx文件。

esno server.jsx

这里涉及到SSR里面的.renderToString()了。待后续文章讨论。

相关文章

• https://newsn.net/say/react-router-routes.html
• https://newsn.net/say/react-router-provider.html

结束语

React官方的SSR是和StaticRouter没关系的，但是大家伙的SSR，毕竟要处理url地址的缘故，所以和StaticRouter产生了联系。更多苏南大叔的react经验文章，请点击：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。