Web组件化 - 子应用中的路由
前一篇讲述了如何把React组件转换为Web组件,同时也留下了几个问题。其中之一就是组件(子应用)内部的路由如何影响到Shell App(以及反之)。 这里我们动手做个测试,依旧以React为例。
打开上一篇建立的项目,执行
npm install react-router-dom --save
npm install express --save
注:react-router-dom的用法可以参考我之前的文章。
修改app.tsx,如下:
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Switch,
Link
} from "react-router-dom";
function Home() {
return (
<div>
App Home
</div>
);
}
function About() {
return (
<div>
About Page
</div>
);
}
function Account() {
return (
<div>
My Account
</div>
);
}
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/account">Account</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/account">
<Account />
</Route>
</Switch>
</div>
</Router>
)
}
class HelloElement extends HTMLElement {
connectedCallback() {
ReactDOM.render(
<div>
<App></App>
{/* <button onClick={() => alert("Clicked")}>
Click Me!
</button> */}
</div>,
this
);
}
}
const tagName = "hello-component";
if (!window.customElements.get(tagName)) {
window.customElements.define(tagName, HelloElement);
}
这里我加入了路由,以及对应的组件。接下来用express作为web server。
在src下新建server.js
const path = require('path');
const express = require('express')
const app = express()
const port = 3000
const fileRoot = path.resolve(__dirname, '../public');
app.use(express.static(path.join(__dirname, '../public')))
app.get('/', (req, res) => {
res.sendFile('index.html', { root: fileRoot });
})
app.get('/account', (req, res) => {
res.sendFile('index.html', { root: fileRoot });
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
代码就绪后,运行npm run build, 再运行node ./src/server.js
可以看到sub app的路由正常工作。
分类:
React
, Micro-FrontEnd
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具