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

作者站长头像
站长
· 阅读数 10

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

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

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

回复
1个回答
avatar
test
2024-07-04

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

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>
  );
};

这样就可以了

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容