Django & React Tutorial #4 - React Router and Building Components
Why Stack Overflow recommends it
Stack Overflow users cite it when they are following the series and hit React setup or webpack errors, or need an example of React Router wired into a Django project.
Recommended by 1 people across 1 different months, 2021 to 2023.
What it is
Part 4 of Tech With Tim's Django and React series, covering React Router in a Django-backed app. It shows how to render different pages by URL endpoint, perform redirects, and use the history prop, building the series' music controller app step by step.
What people said
Recommends tomma-d · 2022-05 · Stack Overflow · on “Why is only the first React component rendering in my multi-page in Django app?”
Following the advice from @TonyN's comments, I managed to get react-router [LINK] method working well. I reorganised App.js to be the home of the Router and brought my components in as follows: import React, { Component, Fragment } from 'react'; import ReactDOM from 'react-dom'; import UploadPage from './UploadPage'; import Viz from './Viz'; import { BrowserRouter as Router, Routes, Route, Link, Redirect } from 'react-router-dom' export default class App extends Component { render() { return ( <div> <Router> <Routes> <Route exact path='/' element={ <UploadPage />} /> <Route exact path='/viz' element={ <Viz /> } /> </Routes> </Router> </div> ) } } ReactDOM.render(<App />, document.getElementB
Cites LogicalDev · 2021-07 · Stack Overflow · on “module parse failed: Unexpected token (10:11)”
I'm new to programming and i'm following a tutorial ( [this video] ) However, i keep getting the following error: ERROR in ./src/components/app.js 10:11 Module parse failed: Unexpected token (10:11) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See [LINK] | | render() { > return <h1>{this.props.name}</h1>; | } | } @ ./src/index.js 1:0-38 webpack 5.45.1 compiled with 1 error in 103 ms When i run: npm run dev App.JS import React, { Component } from "react"; import { render } from "react-dom"; export default class App extends Component { constructor(props) { super(props); } render() { return <h1>{this.props.name}</h1>; } } cons
Cites user2699584 · 2023-02 · Stack Overflow · on “webpack 5.73.0 compiled successfully infinite loop”
i am trying to run a react webpack application however when i run the react app via npm run dev however the webpack build goes into an infinite loop. when i run npm run dev this is the output: > frontend@1.0.0 dev > webpack --mode development --watch asset main.js 1.34 MiB [compared for emit] [minimized] (name: main) 1 related asset runtime modules 1.04 KiB 5 modules cacheable modules 1.28 MiB modules by path ./node_modules/ 1.28 MiB modules by path ./node_modules/react/ 85.7 KiB 2 modules modules by path ./node_modules/react-dom/ 992 KiB 2 modules modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules + 3 modules modules by path ./src/ 1.82 KiB ./src/index.js 35 bytes [built] [code ge