Develop Reference

Content not rendered on webpage, React JS

I am trying to render the h1 tag when following the path '/', however, when I refresh the page the text doesn't show up. I have already switched the tags with tags as I was following an old tutorial. I am using react-router-dom v6.
HomePage.Js
import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Routes, Route, Link, Redirect } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<Routes>
<Route path='/'>
<h1>This is the home page</h1>
</Route>
<Route path='/join' element={ <RoomJoinPage /> } />
<Route path='/create' element={ <CreateRoomPage/> } />
</Routes>
</Router>
);
}
}
App.Js
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);

set your routing in app.js like this
<Router>
<Switch>
<Route exact path='/'>
<h1>This is the home page</h1>
</Route>
<Route exact path='/join'> </Route>
<Route exact path='/create'> </Route>
</Switch>
</Router

React application router

import React, { Component } from 'react';
import './App.css';
import {Switch,Route} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './componants/Navbar';
import ProductList from './componants/ProductList';
import Details from './componants/Details';
import Default from './componants/Default';
import Cart from './componants/Cart';
class App extends Component {
render() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path={'/'} Component={ProductList} />
<Route path={'/Details'} Component={Details} />
<Route path={'/Cart'} Component={Cart} />
<Route Component={Default} />
</Switch>
</React.Fragment>
);
}
}
export default App;
Why <switch></switch> not working while I reach any page of my application?

you need to specify like this
<Route exact path="/" component={PlaceOrder} />
<Route path="/updatepredicted" component={UpdatePredicted} />
<Route path="/kitchen" component={Kitchen} />
looks at the path

React not displaying correct route

I am putting together a small application to get used to React, now I have installed React-Router-Dom and when I click a link the URL correctly changes. The issue is that the correct Component does not display.
index.js
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import Sidebar from './Components/Sidebar';
import SidebarItem from './Components/SidebarItem';
import Home from './Components/Home';
import './App.scss';
import { Link, Route, Switch } from 'react-router-dom';
class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div className="App">
<Link to='/home'>Home</Link>
<Switch>
<Route path='/home' Component={Home} />
</Switch>
</div>
);
}
}
export default App;
Can anyone tell me the reason why HomeComponent does not appear?

The prop of the Route that takes a component is spelled component with a small c, not Component.
Example
function Home() {
return <div> Home </div>;
}
class App extends Component {
render() {
return (
<Router>
<div>
<Link to="/home">Home</Link>
<Switch>
<Route path="/home" component={Home} />
</Switch>
</div>
</Router>
);
}
}

not being able to pass url parameters in react.js

I am working on a React.js web app , for some reasons I am not able to pass url parameters.
An example is being shown below:
Routes:
import React from "react";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";
const AppRoutes = () => (
<BrowserRouter>
<Switch>
<Route exact path='/' component={Helloworld}/>
<Route path='/secondview' component={SecondView}/>
<Route path='/thirdview' component={ThirdView}/>
<Route path='/thirdview/:number' component={ThirdView}/>
<Redirect from='*' to='/' />
</Switch>
</BrowserRouter>
);
export default AppRoutes;
Secondview Component
import React from 'react';
import {Link, withRouter} from 'react-router-dom';
class SecondView extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log("I am being called SecondView component...");
}
render() {
return (
<div className={"boxDiv"}>
<p>Second View</p>
<Link to={{pathname: '/thirdview/7'}}> GO to third view with parameter value. </Link>
</div>
);
}
}
export default withRouter(SecondView);
Thirdview comopnent:
import React from 'react';
import { Route, Link,withRouter } from 'react-router-dom';
import FourthView from "../fourthview/fourthview.component";
class ThirdView extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
console.log(this.props.match.params);
return (
<div className={"boxDiv"}>
<p>Third View</p>
{ console.log(this.props)}
<h1>parameter passed: (#{this.props.params.number})</h1>
</div>
);
}
}
export default withRouter(ThirdView);
What I want, is to be able to get /:number value on my thirdview component! Anyone knows how to achieve such thing in React.js? Are there other ways doing this?
What I get is empty object!

I think it should be:
{this.props.match.params.number}
instead of
{this.props.params.number}
and you don't need withRouter on ThirdView and SecondView as are passed to Route already.
EDIT:
Since you want to render the same component for /thirdview and /thirdview/7 use optional param matcher
<Switch>
<Route exact path='/' component={Helloworld}/>
<Route path='/secondview' component={SecondView}/>
<Route path='/thirdview/:number?' component={ThirdView}/>
<Redirect from='*' to='/' />
</Switch>

React Router Won't Work Without Refresh

Basically, the Route component will not trigger on the click of a Link that changes the path; but after a refresh, the correct component is shown. What could solve the issue?
App component:
import React, { Component } from 'react';
/**
* Import Router
*/
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
/**
* Import custom components
*/
import IndexComponent from '../components/index_component';
import LoginComponent from '../components/login_component';
/**
* Import containers
*/
import Navbar from '../containers/Navbar';
import Footer from '../containers/Footer';
export default class App extends Component {
render() {
return (
<div>
<Navbar />
<Router>
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/" component={IndexComponent} />
</Switch>
</Router>
<Footer />
</div>
);
}
}
Login Component:
import React, { Component } from 'react';
class LoginComponent extends Component {
render() {
return (
<div>LOGIN COMP</div>
);
}
}
export default LoginComponent;

You should enclose all your components inside <Router> that will solve your issue.
<Router>
<Navbar />
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/" component={IndexComponent} />
</Switch>
<Footer />
</Router>

Try the following solution:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import IndexComponent from '../components/index_component';
import LoginComponent from '../components/login_component';
<Router>
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/" component={IndexComponent} />
</Switch>
</Router>