score:13

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


Related Query

More Query from same tag