HashRouter 与 BrowserRouter

HashRouter

如果是将工程对接到某个现有工程下时，推荐使用此模式。
外部工程的路由 http://localhost/v2/xxx
http://localhost/v2/xxx/#/a 可以访问到具体的页面中
http://localhost/v2/xxx/#/b 可以访问到具体的页面中

import React from 'react';
/**
  通过webpack打包umd包
  libraryTarget: 'umd',
  library: 'VisionCanvasLBuild',
*/
const VisionCanvasLBuild = require('./app.bundle')
export default function () {
  React.useEffect(() => {
    VisionCanvasLBuild.mount({})
    console.log(VisionCanvasLBuild)
  }, [])
  return <div id='container'>123</div>
}

/**
  通过webpack打包umd包
  libraryTarget: 'umd',
  library: 'VisionCanvasLBuild',
*/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactRouter from 'react-router-dom';
const {
  Route,
  HashRouter,
  Routes,
  Link
} = ReactRouter
function Demo (props: {
  title: string;
}) {
  return <div>
    {props.title}
  </div>
}
function render (props) {
  return ReactDOM.render(
    <HashRouter>
      <Routes>
        <Route path='/a' element={<Demo title='DemoA' />} />
        <Route path='/b' element={<Demo title='DemoB' />} />
      </Routes>
    </HashRouter>
    ,
    document.getElementById('container'),
  );
}
export async function mount (props) {
  const __props = props;
  render({ ...__props })
}

BrowserRouter

独立工程的可以考虑使用BrowserRouter路由，需要后台辅助

• http://localhost/ 可以访问到你的页面，此时你在页面中通过Link进行跳转，没有问题，但是如果此时没有后台进行路由的代理时，你通过Link跳转到 http://localhost/a 刷新页面，会404
• http://localhost/a 直接访问你的页面，此时没有后台进行路由的代理，会404

如果是将工程对接到某个现有工程下时，可以使用 basename
外部工程路由 http://localhost/v2/yida
http://localhost/v2/yida/ 可以访问到具体的页面中
http://localhost/v2/yida/a 可以访问到具体的页面中
http://localhost/v2/yida/b 可以访问到具体的页面中

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactRouter from 'react-router-dom';
const {
  BrowserRouter,
  Route,
  Routes,
  Link
} = ReactRouter
function Demo (props: {
  title: string;
}) {
  console.log(props);
  return <div>
    <div><Link to='/'>Home</Link></div>
    <div><Link to='/a'>a</Link></div>
    <div><Link to='/b'>b</Link></div >
    {props.title}
  </div>
}
function render (props) {
  const __VisionCanvasLConfig = window.__VisionCanvasLConfig || {}
  return ReactDOM.render(
    <BrowserRoute basename={props.basename || __VisionCanvasLConfig.basename}>
      <Routes>
        <Route path='/' element={<Demo title='main' />} />
        <Route path='/a' element={<Demo title='DemoA' />} />
        <Route path='/b' element={<Demo title='DemoB' />} />
      </Routes>
    </BrowserRouter>
    ,
    document.getElementById('container'),
  );
}
export async function mount (props) {
  const __props = props;
  render({ ...__props })
}