How to use routes in React?

Question

I created a web-app that uses reactjs. Now the basics of the app are :

Create Topics/Sub topics. Display them (this uses react ) Now 2nd task is explained as :-

Show all the topics/sub topics list. Clicking any of them sends json req and the data is recieved and displayed. Now I want to share the topic with link , however on clicking any of the topic only one elemnt of the html renders and the url remains the same.

So this is what i want to do -

On clicking , send json req and recieve data ( done ) Change the url ( I want to know if it is possible using the same react page? )

How can I use Routes in the following code ?

Part 1 :- Deals with recents posts Part 2 :- Deals with the Headings or Topic names Part 3 :- Deals with Sub topics Part 4 :- Deals with showing the Article from the chosen topic and sub topic.

Now its obvious that though the article is displayed , the link / url of the page will never change. However it makes it hard to share the articles. Thus I want to know how to apply the routes in this case ?

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

You should look into react-router's Switch and react-router-dom's Route Components. For instance the following 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 allows conditional rendering based on the URL.

Switch ensures the first matching Route only will be rendered (actually what's returned by the render prop of the Route component).

For all of this to work, remember that a Router component from react router must be an ancestor of YourComponent.

If you want to trigger an SPA navigation after an event, or during a callback, you have to use the withRouter HOC from react-router. StackOverflow thread explaining how it works: Programmatically navigate using react router

I also suggest you look into react-router-redux for redux integration of react-router. It offers the push action to navigate to another route.

References:

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

I have created a Simple react routing example, hope it will make you undrestand routing in react. https://github.com/shivakumaraswamy/reactjs/tree/master/ReacRouting