如何根据路线有条件地呈现特定的html部分

Question

我正在为此项目使用React。

我的网站上有一个Help部分，该帮助部分包含大约50篇以上的文章。如果您转到/help-open-account，我想渲染一些html，如果我转到/fraud，我想显示不同的html，因为它们都是动态内容，所以使用相同的js文件，因此我为什么要根据链接进行渲染。

我知道如何使用条件语句，但是如何使用当前url作为语句，例如path="/(?!help--lostMyCard)"（如果当前在该url上）然后将内容呈现为该内容而不是x内容。

app.js文件具有以下代码->

<BrowserRouter>
    <Switch>
       <Route path="/" exact component={HelpSupport} />
       <Route to="/help-articles" component={HelpArticles} />
    </Switch>
</BrowserRouter>

上面的代码是否将是有条件地呈现内容的唯一方法？因为这是渲染完整的组件，所以我想有条件地渲染其中的子组件。

请澄清一下，我知道如何使用路由等，但这不是问题，问题是当您位于某个组件中时（例如，您位于“帮助”组件中），我是否可以根据自己的条件有条件地呈现内容路线，如果可以，怎么办？

所以我要渲染的帮助文章，如果我的路线是X，但如果我的路线是Y，那么要渲染这个其他组件？

Answer 1

我看到您要访问组件中的路线信息。

您正在寻找的东西似乎已经在这里解决了 How to get current route in react-router 2.0.0-rc5

有关更多信息- 除了我在本注释中提到的上述stackoverflow链接以外，还可以通过此处https://reactjs.org/docs/conditional-rendering.html的链接来理解理解，以完全解决此类问题。

Answer 2

如果我正确理解，您想根据您的路径添加更多路线：

在下面，我们说 help-articles 的子页面可能呈现不同的HTML。

<BrowserRouter>
<Switch>
   <Route path="/" exact component={HelpSupport} />
   <Route path="/help-articles/:subpage?" component={HelpArticles} />
</Switch>

先添加子页可选参数。

然后在您的 HelpArticles 组件呈现方法中：

return {

 const {match} = this.props;
 const {params} = match;

  if(!params.subpage) {
    return <div> no subpage routes</div>
  }else if(params.subpage === "fruits") {
    return <FruitsHelper>
  } else if(params.subpage === "veg") {
    return <VegsHelper>
  }
}

Answer 3

在此处更新代码，

<BrowserRouter>
    <Switch>
       <Route path="/" exact component={HelpSupport} />
       // not `to`, it is `path`
       <Route path="/help-articles" component={HelpArticles} />
    </Switch>
</BrowserRouter>

现在，您可以像下面那样更新HelpArticles组件，

import React, { Component } from "react";
import List, { LostMyCard, LockedAccount } from "../custom/help";

class HelpArticles extends Component {

  _renderArticle() {
    const { location: { pathname } } = this.props;

    // render the components by comparing the url, here you can use switch too.

    if ((pathname || "").includes("lostMyCard")) {
      return <LostMyCard />
    }

    if ((pathname || "").includes("locked-account")) {
      return <LockedAccount />
    }

    // if no case is match then default component for listing the articles.
    return <List />

  }

  render() {

    return (
      <React.Fragment>
        {this._renderArticle()}
      </React.Fragment>
    )
  }
}


export default HelpArticles;