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的路由正常工作。