React Router

Apr 6, 2025•1 min read

React Router can solve the concern when creating a single-page application (SPA) while wanting to have something like multiple pages.

Simply wrap the desired routes with a BrowserRouter and a Switch.

<BrowserRouter>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Redirect to="/" />
    </Switch>
</BrowserRouter>

Also don’t forget to import it

const { BrowserRouter, Route, Switch, Link, Redirect } = ReactRouterDOM;

Codepen example

https://codepen.io/bayuaji/pen/qEBqWoq?editors=0010

The syntax will be a bit different with the new version of React. For the latest version, I recommend reading it on W3Schools. https://www.w3schools.com/react/react_router.asp

#reactjs