10

Client Side Routing in React

 3 years ago
source link: https://dev.to/leepzig/client-side-routing-in-react-24nf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

When approaching routing in React it can be a bit daunting at first for the causal beginner, I hope that this post makes it easier to understand by breaking it up into easily digestible chunks.

Installing and Setup

We are going to be using react-router-dom to handle our routing, if you want to look at the documentation, you can refer to it here

First we need to install react-router-dom so run the following command in your terminal:

npm install react-router-dom
//or
yarn add react-router-dom
Enter fullscreen modeExit fullscreen mode

BrowserRouter, Switch, and Route

After you have it installed, we're going to go our highest parent component, typically that will be App.js and we are going to import BrowserRouter, Switch, and Route.

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"
Enter fullscreen modeExit fullscreen mode

Then we are going to put in the basic structure for our routes. We will have BrowserRouter renamed as Router as the most outer wrapper:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>

</Router>
)
}
Enter fullscreen modeExit fullscreen mode

Inside Router we will place our Routes as such:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>
  <Route path="/">
    <Home/>
  </Route>
  <Route path="/about">
    <About/>
  </Route>
</Router>
)
}
Enter fullscreen modeExit fullscreen mode

And then finally inside Router we will wrap all of our Routes with the <Switch> component like this:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>
  <Switch>
    <Route path="/">
      <Home/>
    </Route>
    <Route path="/about">
      <About/>
    </Route>
  </Switch>
</Router>
)
}
Enter fullscreen modeExit fullscreen mode

The Switch component makes it so that if your are on the "/" root address you won't see what is in the "/about" address. You can think of it like a switch statement or like tabs where you can only see one at a time. But your url matches more than one it will display the url it matches first going from top to bottom. To prevent that we can add exact key word to only allow the exact url to display our content:

  <Route exact path="/about">
      <About/>
  </Route>
Enter fullscreen modeExit fullscreen mode

Link and NavLink

Okay, we have our routes, now let's make a NavBar Component so that our user can access them.

import { NavLink } from 'react-router-dom'

const NavBar = () => {
  return (
    <div>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </div>
  )
}
Enter fullscreen modeExit fullscreen mode

The only difference between <Link> and <NavLink> is that when ever a Navlink route is selected the Navlink will have the link active attribute applied to it. Each Nav/Link component has to have the to attribute to direct the user to the correct route. Notice that the value of the to corresponds to our Routes in our App component.

Beyond The Basics

That will allow you to set up some basic client side routing, but there is actually a lot more that you can do with react-router-dom. There are some really useful hooks like useHistory, whicht you can use to redirect your user after an event, or `useParams to allow them follow a link for more details about something on your page. Definitely check out the documentation from React Router for more info.

I hope this gave you a good start to managing routes client side.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK