Django & React Tutorial #4 - React Router and Building Components

This django and react tutorial covers how to use react router and render different pages based on a url endpoint. You will learn how to use react router, how to perform page redirects and how to use the history prop involved with react router.

⭐️ Timestamps ⭐️
Addressing Some Concerns | 00:00
Tutorial #4 | 03:17

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰

🔗 Social Medias 🔗

🎬 My YouTube Gear 🎬

💸 Donations 💸
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

⭐️ Tags ⭐️
- Tech With Tim
- Django and React
- React and Django Tutorial
- React Router
- React Components
- React Router Tutorial
- Django
- React

⭐️ Hashtags ⭐️
#Django #React #JavaScript

[readcoderepeat]

Hey, great tutorial! For those using react-router-dom v6, the API has changed a bit. Took me quite a bit to nail it down lol.

1. The switch has been replaced with Routes.
2. Components for routes are now passed through the element prop.
3. The exact prop is no longer needed as routes match exactly by default in v6.

Here's how you'd update the code:

import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

export default class HomePage extends Component {
constructor(props) {
super(props);
}

render() {
return (
<Router>
<Routes>
<Route path="/" element={<p>This is the home page</p>} />
<Route path="/join" element={<RoomJoinPage />} />
<Route path="/create" element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}

Hope this helps! 👍

[tljstewart]

In 2022, if your components aren't rendering, make these changes:
<Router>
<Routes>
<Route path='/join' element={<RoomJoinPage />}/>
<Route path='/create' element={<CreateRoomPage />}/>
<Route path='/' element={<p> This is the Home Page </p>}/>
</Routes>
</Router>

These are updates required for React Router 6

[for]

in case you get this error:
"export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'"

Change:

<Router>
<Switch>
<Route exact path="/">
<p>This is the home page</p>
</Route>
<Route path="/join" component={RoomJoinPage} />
<Route path="/create" component={CreateRoomPage} />
</Switch>
</Router>

to

<Router>
<Routes>
<Route path='/' element={<p>This is the homepage</p>} />
<Route path='/join' element={<RoomJoinPage/> } />
<Route path='/create' element={<CreateRoomPage/>} />
</Routes>
</Suspense>
</Router>

The reason is "switch" has been replaced with "routes" in newer versions.

[mrbach]

If anyone having problem with displaying paths, 2 options:
n1
Swtich == Routes,
Components == Elements,
elements = { <yourname/> }

n2
npm uninstall react-router-dom

works just fine :)

[akira_asahi]

Manual setup is painful to go through but it teaches you so much. Totally worth it. Thank you for the detailed explanation.

[cl]

this is the correct routing that works in 2023:
import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';


export default class HomePage extends Component {
constructor(props) {
super(props);
}

render() {
return (
<Router>
<Routes>
<Route exact path="/" element={<p>This is the home page</p>} />
<Route path="/join" element={<RoomJoinPage />} />
<Route path="/create" element={ <CreateRoomPage />} />
</Routes>
</Router>
);
}
}

[HitraNtheProgrammer]

Bro, I don't know how you are doing it so many high quality tutorials! Unbelievable!

[jamielee]

Thanks to the comments I was able to fix the Switch to Routes problem 😃 I also had to do this: <Route path="/" element = {<p>this is the homepage</p>}/> it worked after putting the <p> tag inside elements instead of putting it between the Route tags

[saumyaverma]

2:26 I felt him. And by these videos, he is saving my life.

[AndrewMoMoney]

The beginning section where you answer comments should be REACTions with Tim.
I liked my own joke so much, I'm subscribing hahaha. Keep up the great stuff!

[o_poky]

i dont even want to learn react i just came here to thank him for teaching me sockets and pygame. Im making my fourth game

[MsBen]

You should put the router in the App component. That way, if you want to add say, navigation to the sidebar, you could throw that component in App, and it will have access to the Router. It also puts HomePage at the same architectural level as the other pages.

[michaelflores]

I 100% appreciate you going through all the steps no matter how long. You said it. If you don't understand the code it can take you hours if something goes wrong to try and untangle or figure out the problem and you will end up learning either way. Might as well learn upfront before issues happen. Right? Great content.

[dolbyagarwal]

Hey Tim, so I am aware about django but new to react. So this collaboration of django with react is very new to me. I just started this 4th video and after hearing the start intro about you apologizing for the previous long video and its detailed setup, I really really have to say this. Thanks Buddy!!!! I genuinely want to understand every part of video and the setup you showed really helps. While I would ask others to also google stuff to learn if you think something isn't proper for you. that really helps out for self learning. Again thanks mate for this awesome video!!! 😀

[aaaaa-jnsg]

If you're getting an error that says you can't use/import 'Switch' from BrowserRouter use 'Routes' instead of 'Switch' and change the syntax for each Route to be <Route exact path="/" element={<HomePage />} /> for all of your routes

[markogartnar]

16:14 If you only need the div to wrap the inside components you can just use <> ... </> instead so you don't have useless divs in your html.

[prithviprakash]

Bruv, the quality on these tutorials are mad.
Thanks a lot. Really am learning a LOT!!

[abbasanandwala]

Hello Tim, you can write the route for "/" at last without using exact keyword and it should work fine as well. Thanks for this awesome series 👍🏻

[yashainu]

yes, you're right. at the beginning we just let everything set up and run. then after everything goes well, we can slowly understand the 'concepts' and the 'standards'

[ethanroman]

Actually it is high quality introductory, no one explained how Django and react works hand in hand that clear, that clear . Thank you 🙏