Reactjs 在重定向组件（React.js）中传递道具未按预期工作

我正在通过一个练习应用程序来熟悉

在我的

应用程序

组件中，我有一条路线，作为支付

404

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/players" component={Players} />
            <Route path="/teams" component={Teams} />

            {/* params should be last Route as it would match players and teams */}
            <Route path="/:teamId" exact component={TeamPage} />
            <Route
              render={({ location }) => (
                <h1 className="text-center">
                  Sorry, we couldn't find {location.pathname.substr(1)} <br />{" "}
                  404: page not found.
                </h1>
              )}
            />
          </Switch>
        </div>
      </Router>
    );
  }
}

但是在这个例子中，我只能完成重定向，UI中没有显示任何消息

我正在尝试将道具传递到

主页

或

“/”

，因此如果有人从

团队页面

中传递道具。我的

App

组件中的路由将以该消息进行响应，就像它通常所做的那样

摘自TeamPage：

const { loading, teamNames, articles } = this.state;
const { match }                        = this.props;

const { teamId } = match.params;

if (loading === false && teamNames.includes(teamId) === false) {
  return (
    <Redirect
      to={{
        pathname: "/",
        location: { location: window.location.pathname.substr(1) }
      }}
    />
  );
}

---

还有一种方法可以执行404重定向。这是我的建议。因为它有更多的控制权

定义接受简单参数的错误组件

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/players" component={Players} />
            <Route path="/teams" component={Teams} />

            {/* params should be last Route as it would match players and teams */}
            <Route path="/:teamId" exact component={TeamPage} />
            <Route path="/error/:errortype" exact component={ErrorPage} />

          </Switch>
        </div>
      </Router>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
{/*参数应该是最后一条路线，因为它将匹配球员和球队*/}
);
}
}

//您的重定向逻辑

const { loading, teamNames, articles } = this.state;
const { match }                        = this.props;

const { teamId } = match.params;

if (loading === false && teamNames.includes(teamId) === false) {
  return (
    <Redirect
      to={'/error/404'}
    />
  );
}

const{loading，teamNames，articles}=this.state；
const{match}=this.props；
const{teamId}=match.params；
if（加载===false&&teamNames.includes（teamId）==false）{
返回(
);
}

//错误页面组件

const ErorPage = ({match: { params:{ errortype } }})=>(
  // have your logic for different templates for different types of errors.
  // ex.
  <div>
    {
      errortype === 404 ?
      <div>you got a 404</div> :
      <div>sone generic message</div>
      // this logic can change with respect to your app.
    }
  </div>
)

constrorpage=（{match:{params:{errortype}}）=>(
//为不同类型的错误提供不同模板的逻辑。
//前。
{
errortype===404？
你有一个404：
sone通用消息
//此逻辑可能会因您的应用程序而改变。
}
)

还有一种方法可以执行404重定向。这是我的建议。因为它有更多的控制权

定义接受简单参数的错误组件

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/players" component={Players} />
            <Route path="/teams" component={Teams} />

            {/* params should be last Route as it would match players and teams */}
            <Route path="/:teamId" exact component={TeamPage} />
            <Route path="/error/:errortype" exact component={ErrorPage} />

          </Switch>
        </div>
      </Router>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
{/*参数应该是最后一条路线，因为它将匹配球员和球队*/}
);
}
}

//您的重定向逻辑

const { loading, teamNames, articles } = this.state;
const { match }                        = this.props;

const { teamId } = match.params;

if (loading === false && teamNames.includes(teamId) === false) {
  return (
    <Redirect
      to={'/error/404'}
    />
  );
}

const{loading，teamNames，articles}=this.state；
const{match}=this.props；
const{teamId}=match.params；
if（加载===false&&teamNames.includes（teamId）==false）{
返回(
);
}

//错误页面组件

const ErorPage = ({match: { params:{ errortype } }})=>(
  // have your logic for different templates for different types of errors.
  // ex.
  <div>
    {
      errortype === 404 ?
      <div>you got a 404</div> :
      <div>sone generic message</div>
      // this logic can change with respect to your app.
    }
  </div>
)

constrorpage=（{match:{params:{errortype}}）=>(
//为不同类型的错误提供不同模板的逻辑。
//前。
{
errortype===404？
你有一个404：
sone通用消息
//此逻辑可能会因您的应用程序而改变。
}
)

我将很快尝试一下，我会告诉你我的发现！非常感谢。欢迎：D。我在stackoverflow上处于活动状态。。在这里发表评论，我会回答：很抱歉弄乱你的答案，太好了，我只是想更新我的问题。我上面有个错误。基本上我知道必须在

Teams.js

组件中实现错误处理，但我不确定在哪里！！！是的，我在想编辑是关于什么的。。更新你的问题，我会看一看我很快就会尝试，我会让你知道我的发现！非常感谢。欢迎：D。我在stackoverflow上处于活动状态。。在这里发表评论，我会回答：很抱歉弄乱你的答案，太好了，我只是想更新我的问题。我上面有个错误。基本上我知道必须在

Teams.js

组件中实现错误处理，但我不确定在哪里！！！是的，我在想编辑是关于什么的。。更新你的问题，我会看一看