Question

我创建了一个使用reactjs的网络应用。现在，该应用程序的基础如下：

创建主题/子主题。显示它们（这使用react）现在，第二个任务的解释为：-

显示所有主题/子主题列表。单击它们中的任何一个将发送json req，并接收并显示数据。现在，我想通过链接共享主题，但是单击任何主题时，只有一个html呈现器和url保持不变。

这就是我想做的-

单击，发送json req并接收数据（完成）更改网址（我想知道是否可以使用相同的React页面吗？）

如何在以下代码中使用路由？

第1部分：-处理最近发布的帖子第2部分：-处理标题或主题名称第3部分：-处理子主题第4部分：-处理显示所选主题和子主题中的文章。

现在很明显，尽管显示了文章，但是页面的链接/ URL永远不会改变。但是，这使得共享文章变得困难。因此，我想知道在这种情况下如何应用路由？

render() {
  var lists = this.state.list;
  var lists2 = this.state.list2;
  var aname = this.state.article.name;
  var date = this.state.article.date;
  var lists3 = this.state.listrec;

  return (
    <div className="row">
      <div id="recentsbar" className="col-md-3">
        <div className="row">
          <div className="col-md-9">
            <div>
              <div style={{ display: this.state.hide2 }}>
                <h2>
                  <b> Recents </b>
                </h2>
                <div
                  className="lds-ellipsis"
                  style={{ display: this.state.load2 }}
                >
                  <div />
                  <div />
                  <div />
                  <div />
                </div>
                <div id="subl">
                  {lists3.map(number => (
                    <Item3 name={number} show={this.rec.bind(this)} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="col-md-8">
        <div style={{ display: this.state.hide }}>
          <h1 style={{ marginLeft: 6 + "em" }}>
            <b> Subjects List </b>
          </h1>
          <div className="row">
            <div className="col-md-6">
              <ul style={{ marginTop: 1 + "em" }} /*className="list-group"*/>
                <div
                  className="lds-ellipsis"
                  style={{ display: this.state.load }}
                >
                  <div />
                  <div />
                  <div />
                  <div />
                </div>
                {lists.map(number => (
                  <Item name={number} hide={this.hide.bind(this)} />
                ))}
              </ul>
            </div>
          </div>
        </div>
        <div className="col-md-8">
          <div style={{ display: this.state.show }}>
            <h1 style={{ marginLeft: 6 + "em" }}>
              <b> {this.state.selsub} </b>
            </h1>
            <div className="row">
              <div className="col-md-auto" style={{ marginLeft: 6 + "em" }}>
                <ul
                  style={{ marginTop: 1 + "em" }}
                  className="list-group art"
                >
                  <div
                    className="lds-ellipsis"
                    style={{ display: this.state.load }}
                  >
                    <div />
                    <div />
                    <div />
                    <div />
                  </div>
                  {lists2.map(number => (
                    <Item2 name={number} hide2={this.hide2.bind(this)} />
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div style={{ display: this.state.showarticle }}>
          <div className="lds-ellipsis" style={{ display: this.state.load }}>
            <div />
            <div />
            <div />
            <div />
          </div>
          <div className="arthead"> {aname} </div>
          <div style={{ float: "right", opacity: 0.5 }}>
            Updated on: {date}{" "}
          </div>
          <div
            style={{
              marginLeft: 1 + "em",
              lineHeight: 2 + "em",
              marginTop: 4 + "em"
            }}
            dangerouslySetInnerHTML={{ __html: this.state.article.body }}
          />
        </div>
      </div>
    </div>
  );
}

Answer 1

您应该研究react-router的Switch和react-router-dom的Route组件。例如以下jsx：

import { Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';
class YourComponent extends Component {
    render() {
        return (
            <Switch>
                <Route
                    path="/"
                    exact
                    render={
                        () => (
                           <h1>root content</h1>
                           <Link to="/content1">content1</Link>
                        )
                    }
                />
                <Route
                    path="/content1"
                    exact
                    render={
                        () => (
                           <h1>content 1</h1>
                           <Link to="/">root</Link>
                        )
                    }
                />
            </Switch>
        );
    }
}

Route允许基于URL进行条件渲染。

Switch确保仅渲染第一个匹配的Route（实际上是Route组件的渲染道具返回的内容）。

要使所有这些正常工作，请记住，react路由器中的Router组件必须是YourComponent的祖先。

如果您想在事件发生后或回调期间触发SPA导航，则必须使用react-router的withRouter HOC。说明其工作原理的StackOverflow线程：Programmatically navigate using react router

我还建议您研究react-router-redux以实现react-router的redux集成。它提供了push操作以导航到另一条路线。

参考文献：

https://reacttraining.com/react-router/web/api/Switch

https://reacttraining.com/react-router/web/api/Route

https://reacttraining.com/react-router/web/api/Link

https://reacttraining.com/react-router/web/api/withRouter

React : difference between <Route exact path="/" /> and <Route path="/" />

https://www.npmjs.com/package/react-router-redux

Answer 2

我创建了一个简单的React路由示例，希望它将使您对React中的路由不了解。 https://github.com/shivakumaraswamy/reactjs/tree/master/ReacRouting

如何在React中使用路由？

2 个答案: