Reactjs 在浏览器中手动键入时，反应路由器URL不工作

当我使用导航栏和按钮在页面之间导航时，浏览器上的URL会正常更改。但是一旦我尝试手动修改URL，它就不起作用了

示例1

• 步骤1：我打开localhost:3000
• 第二步：我点击运动员进入localhost:3000/运动员
• 第三步：我选择一名运动员前往当地主持人：3000/运动员/2/运动员会议/
• 步骤4：我手动将URL更改为localhost:3000/athleters然后我选择一名运动员，我被重定向到localhost:3000/athleters/2/AthleteSessions/直到现在都很好，但是当我用斜杠修改URL以放置localhost:3000/athleters/时，我选择了一个运动员，它不起作用，我被重定向到localhost:3000/athleters/athleteesessions/

示例2

• 步骤1、2和3与第一个示例相同
• 第4步：我选择一个AthleteSession转到本地主机：3000/Athleters/2/AthleteSessions/1/TrainingSession/它工作正常，但当我试图通过手动修改URL返回上一页时，本地主机：3000/Athleters/2/AthleteSessions，然后我再次选择一个AthleteSession，它不起作用，我被重定向到本地主机：3000/运动员/2/1/训练会话/

App.js

import { Route, Switch, Redirect } from "react-router-dom";

<Route path="/Athletes" exact component={Athletes} />
<Route path="/Athletes/:id/AthleteSessions" exact component={AthleteSessions} />
<Route path="/Athletes/:athleteId/AthleteSessions/:athleteSessionId/TrainingSession"
       exact component={AthleteTrainingSession} />

import { BrowserRouter as Router } from "react-router-dom";

render( <Router> <App /> </Router>, document.getElementById("root") );

onClick={() => {
  this.props.history.push({
    pathname:
      "Athletes/" + ath.AthleteId + "/AthleteSessions/",
  });
}}

passedAthleteId = this.props.match.params.id;

onClick={() => {
  this.props.history.push({
    pathname:
      athSess.AthleteSessionId + "/TrainingSession/",
  });
}}

AthleteSessions.js

import { Route, Switch, Redirect } from "react-router-dom";

<Route path="/Athletes" exact component={Athletes} />
<Route path="/Athletes/:id/AthleteSessions" exact component={AthleteSessions} />
<Route path="/Athletes/:athleteId/AthleteSessions/:athleteSessionId/TrainingSession"
       exact component={AthleteTrainingSession} />

import { BrowserRouter as Router } from "react-router-dom";

render( <Router> <App /> </Router>, document.getElementById("root") );

onClick={() => {
  this.props.history.push({
    pathname:
      "Athletes/" + ath.AthleteId + "/AthleteSessions/",
  });
}}

passedAthleteId = this.props.match.params.id;

onClick={() => {
  this.props.history.push({
    pathname:
      athSess.AthleteSessionId + "/TrainingSession/",
  });
}}

---

您的当前路线定义为良好：

<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/Athletes" component={Athletes} />
    <Route
        exact
        path="/Athletes/:id/AthleteSessions"
        component={AthleteSessions}
    />
    <Route
        exact
        path="/Athletes/:athleteId/AthleteSessions/:athleteSessionId/TrainingSession"
        component={AthleteTrainingSession}
    />
</Switch>

// FIRST (lets refer it first)
onClick={() => { 
    this.props.history.push({
    pathname:
        "Athletes/" + ath.AthleteId + "/AthleteSessions/",
    });
}}

// SECOND (lets refer it second)
onClick={() => {
    this.props.history.push({
    pathname:
        athSess.AthleteSessionId + "/TrainingSession/",
    });
}}

history.push（'/hello'）

从

localhost:3000/some/url

到

localhost:3000/hello

-->易于理解

history.push（'hello'）

从

localhost:3000/some/url

到

localhost:3000/some/hello

-->不太容易，所以要避免

因此，只要您首先和第二次使用上述

历史记录，一切都正常运行

但是当您在浏览器中手动键入URL时，问题就开始了，有时会以结尾，有时则没有


解决方案1：
将第一个和第二个更改为使用带前导的
/
和无尾随的
/
的完全限定URL，尾随的
/
不再重要，因为我们使用完全限定URL。另见：

由于我们现在使用的是完全限定的URL，它将完美地工作，但是代码似乎很难管理，因为您将在每次
历史推送
时形成完整的URL


解决方案2：
与解决方案1相同，但代码更好：

使用
路径
和
生成路径
定义路由：

export const paths = {
  Athletes: "/Athletes",
  AthleteSessions: "/Athletes/:id/AthleteSessions",
  AthleteTrainingSession:
    "/Athletes/:athleteId/AthleteSessions/:athleteSessionId/TrainingSession",
};

export const makePaths = {
  AthleteSessions: (id) => {
    return `/Athletes/${id}/AthleteSessions`;
  },
  AthleteTrainingSession: (athleteId, athleteSessionId) => {
    return `/Athletes/${athleteId}/AthleteSessions/${athleteSessionId}/TrainingSession`;
  },
};

// in JSX
<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path={paths.Athletes} component={Athletes} />
  <Route exact path={paths.AthleteSessions} component={AthleteSessions} />
  <Route
    exact
    path={paths.AthleteTrainingSession}
    component={AthleteTrainingSession}
  />
</Switch>


解决方案3：
进行嵌套路由。看，还有。

我建议您使用解决方案2，但请务必阅读解决方案3（嵌套），如果可能，请使用。
以下是有关如何创建StackOverflow代码段的说明：我创建了一个git回购，其中包含您需要查看的代码：Thank@AjeetShah:-）我为您的回购提供了分支并提出了拉取请求。解决方案2和解决方案1**，共有2个分支。