javascript - 通过分享链接点击进入本地项目，怎样才能进入静态路由的根路由?

Question

本地开发，后端生成的分享链接格式如下：

http://192.xxx.xxx.xxx:3000/x/aaa/bbb, 其中aaa为分享内容的id, bbb为分享内容权限信息的id

现在点击这个链接以后，由于链接不符合前端静态路由配置( react-router-dom v6 => useRoutes )，因此并不能进入到我编写的分享权限检测模块，只能进入到index.html文件，我应该在index.html里做分享权限检测，还是又什么别的办法？能进入静态路由的根路由就行

Answer 1

你可以在前端路由配置中添加一个动态路径匹配，先在你的路由配置中添加一个新的路由，用于处理分享链接：

import { Route, Routes } from 'react-router-dom';
import ShareContent from './components/ShareContent';

// 其他路由和组件导入

const App = () => {
  const routes = useRoutes([
    // ...其他路由配置
    {
      path: '/x/:contentId/:permissionId',
      element: <ShareContent />,
    },
  ]);

  return <div className="App">{routes}</div>;
};

然后在你的ShareContent组件中，你可以从路由参数中获取contentId和permissionId

import { useParams } from 'react-router-dom';

const ShareContent = () => {
  const { contentId, permissionId } = useParams();

  // 在这里处理 contentId 和 permissionId
  // 例如：获取分享内容、验证权限等

  return (
    <div>
      <h1>Share Content</h1>
      {/* 渲染分享内容 */}
    </div>
  );
};

这样就可以了