Routing with React

    Routing with React is easy, but it took me a little while to get used to. I've included a code snippet of my page that handles routing, and I'll show off how I reference my router further down. On my site, when routing between 'pages', only the content section will change, the header and navigation bar will note change, so really we are just routing between which component will display. In the below code, we import Router, Switch and Route from react-router-dom. We also import ProtectedRoute, that's some Auth0 stuff that won't allow you to access a site unless you are logged in. It's not really my code, but you can learn about it here

    So our Switch contains a bunch of routes, each route has a path (the link that you'll find in the browser) and the component that will display. The path can contain a slug or id, which can then be accessed by the component! That way when you click a project it'll send that slug to the component, which will use that slug to get information about that project. Anyway that's the gist of the router, it's really very simple. I said I would show off the code when the router gets called, but that's just a simple <a> or <Link> tag, using the path as the 'href' or 'to'. Routing is pretty simple!

Comments

Popular posts from this blog

Reviewing WPF and MVVM

Using WebRTC to build a videophone in React and TypeScript

Learning Flutter