How to Set Up and Implement createBrowserRouter in Your App

React-router-dom contains multiple ways to set-up our routing. However, createBrowserRouter is the recommended way by the react-router. It will allow us to navigate between our pages in a compact, well-organized way. We can even have dynamic routers connected to fetched API using react-query. Our small basic demonstration will show us how to set it up and implement it in our app.

Vite + React + TS

Note: You can check out my recent unfinished website from the link above. It is made with createBrowserRouter. So that you can also see what I mean.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

import App from './App.tsx'

const router = createBrowserRouter([{
  path: "/",
  element: <App/>,
  errorElement: <NotFoundPage/>,
  children: [{
    path: "/prices/:crypto",
    element: <Prices/>
  }]
  },
  {
    path: "/login",
    element: <LoginForm/>
  },
  {
    path: "/signin",
    element: <SignInForm/>
  },
  {
    path: "/trade",
    element: <Trade/>
  },
])

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <RouterProvider router={router}/>
  </React.StrictMode>,
)

createBroweserRouter gets an array with objects. Those objects are containing our route logic with some keys such as path, element, children.
Basically, path that we give is belong to the element which is a component in our app. That path shall render the related component. errorElement helps us to manage errors with its own component. The component in the errorElement can contain its own Link that helps us to go back to home page. We can also use children key for creating another routing logic in certain path we choose. path: “/prices/:crypto” allow us to dynamically give a selected path. With using react-query, axios and useState we can connect them to this :crypto so that When user select from a display its dynamically fetches the chosen one with its id and give it into :crypto. path: “/prices/SELECTED ITEM”

import { Link } from "react-router-dom"
  
 <div>
       <Link to={"/trade"}>Spot 🚀</Link>
       <Link to={"/trade"}>Margin</Link>
        <Link to={"/trade"}>APIs</Link>
    </div>

Get Ateshan Gunduz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

After setting up our logic we can use Link from react-router-dom into our JSX to navigate to that component from any component.

import { useNavigate } from "react-router-dom"

const navigate = useNavigate();

const onSubmit: SubmitHandler<FormFields> = async (data)=>{
    try{
        await new Promise((resovle)=> setTimeout(resovle, 1000))

        dispatch(setFormData(data))
        navigate("/charts")
    } catch (error) {
         setError("root", {message: "This email is already taken"})
    }
  
}

The example above is an extra. Just to show one other ability we can use. useNavigate from react-router-dom let us to navigate into certain path within a function that we use. In the example above function submits the form. It does many things and in end it navigates to the path we give.

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
• More content at Stackademic.com