基于ui5-webcomponents-react的React应用路由失效及导航疑问

一、先排查Worklist组件不显示的核心问题 #

1. 匹配react-router版本的正确写法 #

如果使用react-router v6，App.js必须用<Routes>+<Route>组合，无需exact（v6默认精准匹配）：

// App.js v6示例
import { Routes, Route } from 'react-router-dom';
import Worklist from './Worklist';
import Detail from './Detail';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Worklist />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
    </div>
  );
}

如果是v5版本，必须用<Switch>+exact确保精准匹配：

// App.js v5示例
import { Switch, Route } from 'react-router-dom';
import Worklist from './Worklist';
import Detail from './Detail';

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Worklist} />
        <Route path="/detail" component={Detail} />
      </Switch>
    </div>
  );
}

2. 给BrowserRouter添加路径前缀 #

因为approuter的welcomeFile是todoapp/，你的应用实际运行在/todoapp子路径下，必须给BrowserRouter配置basename才能正确匹配路由：

// index.js示例
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/todoapp">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

二、调整SAP BTP上的xs-app.json配置 #

1. approuter的xs-app.json #

确保路由规则将/todoapp路径转发到你的应用实例：

{
  "welcomeFile": "todoapp/",
  "routes": [
    {
      "source": "^/todoapp/(.*)",
      "target": "$1",
      "destination": "你的应用目标名称"
    }
  ]
}

这里的你的应用目标名称是你在BTP控制台配置的、指向应用部署实例的目标。

2. 应用自身public下的xs-app.json #

配置所有路由都指向index.html，让react-router接管前端路由逻辑：

{
  "welcomeFile": "index.html",
  "routes": [
    {
      "source": "^/(.*)",
      "target": "index.html",
      "authenticationType": "none"
    }
  ]
}

三、页面导航与URL格式说明 #

1. 正确的URL格式 #

基于approuter的前缀，应用完整URL应为：

• Worklist页面：https://你的approuter域名/todoapp/
• Detail页面：https://你的approuter域名/todoapp/detail

2. 推荐的导航方式 #

使用react-router提供的组件或钩子，避免原生<a>标签触发页面刷新：

// 用Link组件声明式导航
import { Link } from 'react-router-dom';

// 在Worklist组件中使用
<Link to="/detail">查看详情</Link>

// 用useNavigate钩子编程式导航
import { useNavigate } from 'react-router-dom';

function Worklist() {
  const navigate = useNavigate();
  const goToDetail = () => {
    navigate('/detail');
  };
  return <button onClick={goToDetail}>跳转到详情</button>;
}

四、额外排查点 #

• 确认index.html中存在<div id="root">节点，确保React组件挂载到正确位置。
• 打开浏览器控制台，检查是否有路由匹配失败、组件导入错误等报错信息。

内容的提问来源于stack exchange，提问作者Badhusha