React Router VS Conditional Rendering

Question

I am confused about the core difference (especially regarding performance) between using React Router and regular conditional rendering approach. What I mean "regular conditional rendering approach" is, for example:

we can set a state in parent component, and pass it as children component's props, we conditionally update such state depends on requirement, and children component will re-render as different content depends on its props.

I think it can achieve the exact same goal of using React Router, so why we still need React router? Is using react Router will bring much better performance experience or something (suppose we don't need history feature)?

Answer 1

React Router itself uses conditional rendering, and it's entirely possible to replace its functionality with conditional rendering. You don't have to use it, and as far as I'm know there's no general argument for why it would be more performant than doing your own conditional rendering.

The reason to use React Router is because it allows you to express your routing declaratively. It's common for an application to have a number of logical views or routes, you can conditionally select which to display at a given time in code but as the number of possible views increases this logic can become complicated, many developers have found it easier to manage proliferating views by expressing them in a declarative syntax, and that's the core function React Router serves.

For example, consider the following example (modified from react router guide) using conditional rendering:

class BasicExample extends React.Component {
  constructor() {
    super();
    this.state = { currentView: "home" };
  }

  render() {
    const currentView = this.state.currentView;

    return (
      <div>
        <ul>
          <li onClick={() => this.setState({ currentView: "home" })}>Home</li>
          <li onClick={() => this.setState({ currentView: "about" })}>About</li>
          <li onClick={() => this.setState({ currentView: "topics" })}>
            Topics
          </li>
        </ul>

        {currentView === "home" && <Home />}
        {currentView === "about" && <About />}
        {currentView === "topics" && <Topics />}
      </div>
    );
  }
}

Verses using router:

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

In the first case you introduce internal state to your component, you'll need to pass a callback to any children wanting to change the current view, there's no clear way to handle hierarchal routing, the case where you get an unexpected currentView value falls to you to handle, and arguably the latter example is easier to read. On the other hand, the first example is arguable more obvious, and somewhat more flexible using the React Router library. As with anything, it's a tradeoff you need to evaluate in the context of the problem you're trying to solve.

Additionally, it's common to want to integrate certain things with your notion of a logical view, for example you might want to change the browser url, maintain a history of views, or manage your current logical view through a state container and these are all pieces of functionality that React Router helps facilitate