javascript - 除了一条路由之外,所有路由都使用基本名称子目录吗?

标签 javascript reactjs react-router react-router-dom

我的react应用程序正在集成到一个已经存在的Maven项目中,并且需要有一个子目录/my .

所以所有的 Route需要basename/my/~~~ 。但是,有一条路由不需要子目录,如果应用,点击该路由会导致无限循环。

具体路线是/logout 。太打击了/my/logout导致无限循环。

项目中只有一个引用链接到 logout路线和那一个Link

<Link to={"/logout"}>Logout</Link>

下面是我的App.js和我的<Router>

const App = () => {
  return (
    <div className="App">
      <Router basename="/my/">
        <Switch>
          <Route path="/login" component={Login} />
          <Route exact path={"/"} component={Login} />
          <Route path="/forgotpassword" component={ForgotPassword} />
          <Route
            path="/website-user/reset-password/:token/:userId"
            component={ResetPassword}
          />
          <Route
            path="/complete-registration/:token/:userId"
            component={FinishRegistration}
          />
          <Route path={"/register"} component={Login} />
          <Route
            path="/register?email=:email&telephone=:telephone"
            component={Login}
          />
          <Route path={"/"} component={SubNav} />
        </Switch>
        <Route path={"/overview"} component={Overview} />
        <Route path={"/favourites"} component={Favourites} />
        {/* How to get LogoutComponent to go to /logout instead of /my/logout */}
        <Route path={"/logout"} component={Logout} />
      </Router>
    </div>
  );
};

所以有可能拥有所有 <Route>转到/my/~~~除了注销转到 /logout

任何帮助将不胜感激。

最佳答案

不可以。您不能这样做。

页面上不应有多个 BrowserRouters

无论如何,这都行不通,因为它正在与最近的路由器祖先通信。一旦你包装了另一个路由器,你就创建了一个新的历史实例,因此创建了路由和链接的整个子集。

解决方法是,不要为 logout 创建 route,而是使用 onClick 处理您的 logout 功能> 功能与您拥有注销按钮的组件相同。

关于javascript - 除了一条路由之外,所有路由都使用基本名称子目录吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56887623/

相关文章:

reactjs - 按钮的 title 属性必须是字符串 - React Native

reactjs - Firestore 通过数组的字段值进行查询

javascript - Facebook JavaScript API 登录 : What do I store in my own application's user records?

javascript - 使用正则表达式检查 URL 哈希以查找部分和页面

javascript - 如何在 vue js 中动态设置 b-popover 目标?

reactjs - 如何模拟 react 路由器上下文

javascript - 如何在 componentWillReceiveProps 中触发页面重定向?

javascript - Nivo slider 在 Chrome 中不起作用

reactjs - useState/useEffect react 传播运算符的错误

javascript - 如何通过react router传递和使用查询参数?