前一篇講述瞭如何把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的路由正常工作。