We Keep Coding

Page not being displayed after Navigation in React

I am learning React now . I have made a page called as App.js which is a Login Page.I have navigated it to another page App2.js . The navigation process is being done , but I am not able to see the contents in that page .
Here is my Code:-
App.js
import React from "react";
import "./App.css";
//import './App2'
import { Navigate } from "react-router-dom";
function App() {
const [goToContact, setGoToContact] = React.useState(false);
if (goToContact) {
return <Navigate to="/App2" />;
}
return (
<div className="LoginPage">
<div className="topnav">
<h1 className="Heading">E-Commerce App</h1>
</div>
<div className="card">
<div className="container">
<h1 className="SignUp">Sign Up</h1>
<form>
<label for="email" className="email">
<b>Email</b>
</label>
<br />
<input type="email" name="email" placeholder="Enter your email" />
<br />
<label for="psw" className="Password">
<b>Password</b>
</label>
<br />
<input
type="password"
name="Password"
placeholder="Enter your password"
/>
<br />
<label for="psw-repeat">
<b>Repeat Password</b>
</label>
<br />
<input
type="password"
name="Repeat Password"
placeholder="Repeat Password"
/>
<br />
<input type="checkbox" name="Remember Me" className="remember" />
<label for="vehicle1"> Remember Me</label>
<br />
<div class="clearfix">
<button
type="button"
class="cancelbtn"
onClick={() => {
setGoToContact(true);
}}
>
Login
</button>
<button type="submit" class="signupbtn">
Sign Up
</button>
</div>
</form>
</div>
</div>
</div>
);
}
export default App;
App2.js
import React from "react";
function App2() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
export default App2;
``
This is the file structure of my React Application. It is under a src file.
Output of App.js
Output of App2.js

#KarthikKK Phil's comment is what you're looking for. Look into the concept of routing and you will see that you will have one component which will decide which route (component) to render.
First you will need to setup the router:
In your index.js:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
{/* The rest of your app goes here */}
</BrowserRouter>,
root
);
Then your App.js:
function App() {
return (
<Routes>
<Route path="/" element={<App1 />} />
<Route path="/app2" element={<App2 />} />
</Routes>
);
}
const App1 = () => {
return (
<div className="LoginPage">
<div className="topnav">
<h1 className="Heading">E-Commerce App</h1>
</div>
<div className="card">
<div className="container">
<h1 className="SignUp">Sign Up</h1>
<form>
<label htmlFor="email" className="email">
<b>Email</b>
</label>
<br/>
<input type="email" name="email" placeholder="Enter your email"/>
<br/>
<label htmlFor="psw" className="Password">
<b>Password</b>
</label>
<br/>
<input
type="password"
name="Password"
placeholder="Enter your password"
/>
<br/>
<label htmlFor="psw-repeat">
<b>Repeat Password</b>
</label>
<br/>
<input
type="password"
name="Repeat Password"
placeholder="Repeat Password"
/>
<br/>
<input type="checkbox" name="Remember Me" className="remember"/>
<label htmlFor="vehicle1"> Remember Me</label>
<br/>
<div className="clearfix">
<button
type="button"
className="cancelbtn"
onClick={() => {
navigate('/app2');
}}
>
Login
</button>
<button type="submit" className="signupbtn">
Sign Up
</button>
</div>
</form>
</div>
</div>
</div>
)
}
const App2 = () => {
return (
<div>
<h1>Hello</h1>
</div>
);
}
export default App;
Full documentation (worth spending a couple hours really understanding this):
https://reactrouter.com/en/main/start/overview

This is index.js, replace this with yours, if you haven't made any change in index.js.
import React from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";
import App from "./App";
import App2 from "./App2";
import reportWebVitals from "./reportWebVitals";
const router = createBrowserRouter([
{
path: "/",
element: <App />,
},
{
path: "/App2",
element: <App2 />,
},
]);
createRoot(document.getElementById("root")).render(
<RouterProvider router={router} />
);
reportWebVitals();
You have to define the route before you use it. You can define it with what component you need render on that route.
Documentation: https://reactrouter.com/en/main/start/overview

How to redirect another page after button on click method react js [duplicate]

This question already has an answer here:
Problem in redirecting programmatically to a route in react router v6
(1 answer)
Closed 11 months ago.
This is the my login.js page code I want redirect the new page after click the button. I tried several methods but problem not solve. All things are work correctly. but I don't know how to link the page after the api return result in loginClick function. I Added this line in the code refer some tutorial but its not work.
this.props.history.push('/add');
I am new to the react js, I don't know about the react well. please help me.
import React,{Component} from 'react';
import { variables } from '../../Variables';
export class Login extends Component{
constructor(props){
super(props);
this.state={
login:[],
name:"",
password:"",
redirect: false
}
}
changelogindetailsname = (e)=>{
this.setState({name:e.target.value})
}
changelogindetailspass = (e)=>{
this.setState({password:e.target.value})
}
loginClick(){
fetch(variables.API_URL+'login',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
name:this.state.name,
password:this.state.password
})
})
.then(res=>res.json())
.then((result)=>{
alert(result);
this.props.history.push('/add');
},(error)=>{
alert('Faild');
})
}
render(){
const{
name,
password
}=this.state;
return(
<div>
<center>
<h1></h1>
<hr/>
<h3>Welcome Back !</h3>
<p></p>
<div className="container">
<br/>
<br/>
<br/>
<div className="row">
<div className="col">
</div>
<div className="col">
</div>
<div className="col-4">
<style>{"\ .rr{\ float:left;\ }\ "} </style>
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<div className="mb-3">
<label className="form-label rr d-flex"> Username</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control " id="formGroupExampleInput" placeholder="Username"
value={name}
onChange={this.changelogindetailsname}/>
</div>
</div>
<div className="mb-3">
<label className="form-label rr d-flex">Password</label>
<div className="input-group input-group-lg">
<input type="password" className="form-control" id="formGroupExampleInput2" placeholder="Password"
value={password}
onChange={this.changelogindetailspass}/>
</div>
</div>
<div className="d-flex mb-3">
Forgot your password?
</div>
<div className="col">
<div className="form-check rr">
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault"/>
<label className="form-check-label" htmlFor="flexCheckDefault">
Remember me
</label>
</div>
</div>
<div className="col">
<button type="button" className="btn btn-success bb"
onClick={()=>this.loginClick() } >Login</button>
</div>
<br/>
<br></br>
<hr/>
<p>Don't have an account?</p>
<div className="mb-3">
<button type="button" className="btn btn-light d-flex"
>Sign up for Muessoze</button>
</div>
</div>
<div className="col">
</div>
<div className="col">
</div>
</div>
</div>
</center>
</div>
)
}
}

Firstly you should import this:
import { useHistory } from 'react-router-dom';
then:
const history = useHistory();
after all, you can use this in your method:
loginClick(){
fetch(variables.API_URL+'login',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
name:this.state.name,
password:this.state.password
})
})
.then(res=>res.json())
.then((result)=>{
alert(result);
history.push('/add');
},(error)=>{
alert('Faild');
})
}

Take a look at the react router API, if you want to use the this.props.history.push() method you will need to wrap your component with the withRouter HOC wrapper from the react dom api.
See : https://reactrouter.com/docs/en/v6/getting-started/tutorial

How to render new page with react-router-dom in a function?

I am creating an application where I am getting a parameter from a function and if the parameter equals true I would render a new route instead.
I know how to use react-router-dom as to render new routes you would use something like this
<Link to="/login">Login</Link>
But I don't know how to call it in a function.
function functionName(success){
if (success){
//What do I write here?
// Something like go to path="/login"
}
}
Thank you
(edit)
import { useContext, useState, useEffect } from "react";
import { AuthContext } from "../../Context Api/authenticationAPI";
import { FaUserPlus } from "react-icons/fa";
import { Link, useHistory } from "react-router-dom";
import Alerts from "./Alerts";
const Register = () => {
const history = useHistory();
const { addUser } = useContext(AuthContext);
const data = useContext(AuthContext).data;
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
useEffect(() => {
console.log(data);
if (data.success) {
history.push("/login");
}
}, [data]);
return (
<div className="row mt-5">
<div className="col-md-6 m-auto">
<div className="card card-body">
<h1 className="text-center mb-3">
<i>
<FaUserPlus />
</i>{" "}
Register
</h1>
<Alerts />
<form>
<div className="mb-2">
<label>Name</label>
<input
type="name"
id="name"
name="name"
className="form-control"
placeholder="Enter Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-2">
<label>Email</label>
<input
type="email"
id="email"
name="email"
className="form-control"
placeholder="Enter Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-2">
<label>Password</label>
<input
type="password"
id="password"
name="password"
className="form-control"
placeholder="Create Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button
onClick={(e) => {
e.preventDefault();
addUser({ name, email, password });
}}
className="btn btn-primary col-12"
>
Register
</button>
<p className="lead mt-4">
Have An Account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
</div>
);
};
export default Register;
import React from "react";
import { Link } from "react-router-dom";
import { FaSignInAlt } from "react-icons/fa";
const Login = () => {
return (
<div className="row mt-5">
<div className="col-md-6 m-auto">
<div className="card card-body">
<h1 className="text-center mb-3">
<i>
<FaSignInAlt />
</i>{" "}
Login
</h1>
<div className="mb-2">
<label>Email</label>
<input
type="email"
id="email"
name="email"
className="form-control"
placeholder="Enter Email"
/>
</div>
<div className="mb-2">
<label>Password</label>
<input
type="password"
id="password"
name="password"
className="form-control"
placeholder="Enter Password"
/>
</div>
<button className="btn btn-primary col-12">Login</button>
<p className="lead mt-4">
No Account? <Link to="/register">Register</Link>
</p>
</div>
</div>
</div>
);
};
export default Login;

You can make use of the history object and programmatically navigate using history.push()
import { useHistory } from 'react-router-dom'
const history = useHistory();
function functionName(success){
if (success) {
history.push('/login')
}
}
Reference
useHistory Hook

Redirect from inside a method in React [duplicate]

This question already has answers here:
Programmatically Navigate using react-router
(9 answers)
Closed 4 years ago.
I am relatively a beginner in ReactJS. I have been looking for the answer to this question for quite some time now. I have a form which is to be split into 2 parts. The first part contains a few text inputs and radio buttons. There is a Proceed button at the end of Part 1. The button is as below :
<div className="ProceedButton">
<button name="Proceed" type="button" onClick={this.handleClick}>Proceed</button>
</div>
This is the click handler for the Proceed Button :
handleClick(event){
console.log(this.state);
firebase.database()
.ref('registrations/'+this.state.userID)
.set(this.state);
firebase.database()
.ref('registrations/userID')
.set(this.state.userID);
}
So after clicking the Proceed button, I have to store the data on the database and move on to Part 2 of the form which is to be displayed on a new page. Is there a way I can redirect to Part 2 from within handleClick()? If not how else do I achieve it with minimum amount of code?
Thanks in advance.
Here's the complete code for part 1 of the form :
import React, { Component } from 'react';
import firebase from './firebase.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';
class IntroForm extends Component{
constructor(){
super();
this.state={
userID:1,
state:"",
age:'',
ethnicity:"Hispanic or Latino",
race:"American Indian",
sex:"Male",
height:"",
weight:"",
};
console.log(this.state);
this.handleInputChange=this.handleInputChange.bind(this);
this.handleClick=this.handleClick.bind(this);
}
componentDidMount(){
const dbRef=firebase.database().ref().child('registrations');
const countRef=dbRef.child('userID');
countRef.on('value',snap=>{
this.setState({
userID:(snap.val()+1)
});
});
}
handleInputChange(event){
const target=event.target;
const name=target.name;
var value;
if((target.type==="radio"&&target.checked)||target.type!=="radio") value=target.value;
this.setState({
[name]:value
});
}
handleClick(event){
console.log(this.state);
firebase.database().ref('registrations/'+this.state.userID).set(this.state);
firebase.database().ref('registrations/userID').set(this.state.userID);
}
render() {
return(
<div>
<div className="State">
<div className="Head">
State
</div>
<div className="StateField">
<input
name="state"
type="text"
onChange={this.handleInputChange} />
</div>
<hr />
</div>
<div className="Age">
<div className="Head">
Age
</div>
<div className="AgeField">
<input
name="age"
type="number"
onChange={this.handleInputChange} />
</div>
<hr />
</div>
<div className="Ethnicity">
<div className="Head">
Ethnicity
</div>
<div className="EthnicityField">
<input name="ethnicity" type="radio" value="Hispanic or Latino" onClick={this.handleInputChange} defaultChecked /> Hispanic or Latino
<input name="ethnicity" type="radio" value="Non-Hispanic or Non-Latino" onClick={this.handleInputChange} /> Non-Hispanic or Non-Latino
</div>
<hr />
</div>
<div className="Race">
<div className="Head">
Race
</div>
<div className="RaceField">
<input name="race" type="radio" value="American Indian" onClick={this.handleInputChange} defaultChecked /> American Indian
<input name="race" type="radio" value="Asian" onClick={this.handleInputChange}/> Asian
<input name="race" type="radio" value="Native Hawaiian or Other Pacific Islander" onClick={this.handleInputChange}/> Hawaiian or Other Pacific Islander
<input name="race" type="radio" value="Black or African American" onClick={this.handleInputChange}/> Black or African American
<input name="race" type="radio" value="White" onClick={this.handleInputChange}/> White
</div>
<hr />
</div>
<div className="Sex">
<div className="Head">
Sex
</div>
<div className="SexField">
<input name="sex" type="radio" value="Male" onClick={this.handleInputChange} defaultChecked /> Male
<input name="sex" type="radio" value="Female" onClick={this.handleInputChange}/> Female
</div>
<hr />
</div>
<div className="Height">
<div className="Head">
Height
</div>
<div className="HeightField">
<input name="height" type="number" placeholder="In inches" onChange={this.handleInputChange}/>
</div>
<hr />
</div>
<div className="Weight">
<div className="Head">
Weight
</div>
<div className="WeightField">
<input name="weight" type="number" placeholder="In pounds" onChange={this.handleInputChange}/>
</div>
<hr />
</div>
<div className="ProceedButton">
<button name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>
</div>
</div>
);
}
}
export default IntroForm;
App.js :
import React, { Component } from 'react';
import './App.css';
import TopBar from './js/TopBar.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';
import IntroForm from './js/IntroForm.js';
class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={StartButton}/>
<Route exact path="/intro" component={IntroForm}/>
</Switch>
</div>
);
}
}
const StartButton = withRouter(({ history }) => (
<button
type='button'
name="StartButton"
style={{"background":"#0000ff","textAlign":"center","color":"#ffffff","width":"100px","height":"30px"}}
onClick={() => { history.push('/intro') }}
>
Start
</button>
))
export default App;

You need to add a <Route /> in your <Switch /> for the second part of the form, and then in the first form you can do:
this.props.history.push('/form2').

Cannot read property 'params' of undefined

I am trying to edit data in database using fetch but it shows cannot read property 'params' of undefined error where i am fetching it will not get that id using this.props.match.params.id
here is my action
const reportsFetched = (reports,r_id) => {
return {
type: 'REPORTS_FETCHED',
reports,
r_id
}
}
export const fetchReportsbyid = (r_id) => {
return dispatch => {
fetch(`http://localhost/aruna/getreportsbyid.php?r_id=${r_id}`).
then(resp => resp.json()).
then(data => dispatch(reportsFetched(data.reports)));
}
}
my reducer file
export default (state=reportsDefaultstate, action ) => {
switch (action.type){
case 'ADD_REPORT':
return [
...state,
action.reports
]
case 'REPORTS_FETCHED':
const index = state.findIndex(item => item.r_id === action.reports.r_id);
if(index > -1){
return state.map((item) => {
if(item.r_id === action.reports.r_id) return action.reports
return item
})
}else{
return [...state]
}
case 'SET_REPORTS':
return action.reports
default:
return state
}
}
my listitem
const Reportlistitem = ({r_id, reg_date, reg_no, patient_name, gender, age, mobile_no , email_id , refer_by, test_request , report_status , total_amt, receipt_amt, bal_amt}) => (
<div >
<table>
<tbody key={r_id}>
<tr>
<td>{reg_date}</td>
<td>{reg_no}</td>
<td>{patient_name}</td>
<td>{gender}</td>
<td>{age}</td>
<td>{mobile_no}</td>
<td>{email_id}</td>
<td>{refer_by}</td>
<td>{test_request}</td>
<td>{report_status}</td>
<td>{total_amt}</td>
<td>{receipt_amt}</td>
<td>{bal_amt}</td>
<td><Link to={`/edit/${r_id}`} r_id={r_id} className="btn-floating btn-large blue"><i class="large material-icons">edit</i></Link></td>
<td><button className="btn-floating btn-large red"><i class="large material-icons">delete</i></button></td>
</tr>
</tbody>
</table>
</div>
)
export default connect()(Reportlistitem)
this is my form where this error is occured
import React from 'react'
import {connect} from 'react-redux';
import {fetchReportsbyid} from '../actions/reports'
class ReportForm extends React.Component{
constructor(props){
super(props);
}
state = {
r_id:this.props.report ? this.props.report.r_id :0,
reg_date:this.props.report ? this.props.report.reg_date :'',
reg_no:this.props.report ? this.props.report.reg_no:'',
patient_name:this.props.report ? this.props.report.patient_name:'',
gender:this.props.report ? this.props.report.gender:'',
age:this.props.report ? this.props.report.age:'',
mobile_no:this.props.report ? this.props.report.mobile_no:'',
email_id:this.props.report ? this.props.report.email_id:'',
refer_by:this.props.report ? this.props.report.refer_by:'',
test_request:this.props.report ? this.props.report.test_request:'',
report_status:this.props.report ? this.props.report.report_status:'',
total_amt:this.props.report ? this.props.report.total_amt:'',
receipt_amt:this.props.report ? this.props.report.receipt_amt:'',
bal_amt:this.props.report ? this.props.report.bal_amt:''
}
componentDidMount = () => {
if(this.props.match.params.r_id){
this.props.fetchReportsbyid(this.props.match.params.r_id)
}
}
handleChange = (e) => {
this.setState({[e.target.name]:e.target.value})
console.log(this.state)
}
onSubmit = (e) => {
e.preventDefault();
this.props.onSubmit({
reg_date:this.state.reg_date,
reg_no:this.state.reg_no,
patient_name:this.state.patient_name,
gender:this.state.gender,
age:this.state.age,
mobile_no:this.state.mobile_no,
email_id:this.state.email_id,
refer_by:this.state.refer_by,
test_request:this.state.test_request,
report_status:this.state.report_status,
total_amt:this.state.total_amt,
receipt_amt:this.state.receipt_amt,
bal_amt:this.state.bal_amt,
done:this.state.done
})
}
render(){
return(
<div className="row">
<form onSubmit={this.onSubmit} className="col s12">
<div className="row">
<div className="input-field col s4">
<input id="reg_date" name="reg_date" type="date" className="validate" onChange={this.handleChange} />
</div>
<div className="input-field col s4">
<input id="reg_no" name="reg_no" type="text" className="validate" onChange={this.handleChange}/>
<label for="reg_no">Registration no</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="patient_name" name="patient_name" type="text" className="validate" onChange={this.handleChange} />
<label for="patient_name">Patient Name</label>
</div>
<div className="input-field col s4">
<input id="gender" name="gender" type="text" className="validate" onChange={this.handleChange}/>
<label for="gender">Gender</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="age" name="age" type="text" className="validate" onChange={this.handleChange} />
<label for="age">Age</label>
</div>
<div className="input-field col s4">
<input id="refer_by" name="refer_by" type="text" className="validate" onChange={this.handleChange}/>
<label for="refer_by">Refer by</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="mobile_no" name="mobile_no" type="text" onChange={this.handleChange}/>
<label for="mobile_no">Mobile Number</label>
</div>
<div className="input-field col s4">
<input id="email_id" name="email_id" type="email" onChange={this.handleChange} />
<label for="email_id">Email Id</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="test_rquest" name="test_request" type="text" className="validate" onChange={this.handleChange}/>
<label for="test_rquest">Test Requested</label>
</div>
<div className="input-field col s4">
<input id="report_status" name="report_status" type="text" className="validate" onChange={this.handleChange}/>
<label for="report_status">Report Status</label>
</div>
</div>
<div className="row">
<div className="input-field col s2">
<input id="total_amt" name="total_amt" type="text" className="validate" onChange={this.handleChange}/>
<label for="total_amt">Total Amount</label>
</div>
<div className="input-field col s2">
<input id="receipt_amt" name="receipt_amt" type="text" className="validate" onChange={this.handleChange}/>
<label for="receipt_amt">Receipt Amount</label>
</div>
<div className="input-field col s2">
<input id="bal_amt" type="text" name="bal_amt" className="validate" onChange={this.handleChange}/>
<label for="bal_amt">Balance Amount</label>
</div>
</div>
<div className="input-field col 26">
<input type="submit" className="btn waves-effect waves-light" value="Save Report"/>
</div>
</form>
</div>
)
}
}
export default connect()(ReportForm)
please help he to figure it out whats the error here
my router file code is this whats the issue with this
import React from 'react'
import {BrowserRouter, Route, Switch, Link,NavLink} from 'react-router-dom'
import Dashboard from '../components/reportdashboard'
import Createreport from '../components/addreport'
import Editreport from '../components/editreport'
import Notfound from '../components/notfound'
import Header from '../components/header'
import Footer from '../components/footer'
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={ Dashboard } exact={true} />
<Route path="/create" component={ Createreport } />
<Route path="/edit/:r_id" component={ Editreport } />
<Route component={ Notfound }/>
</Switch>
<Footer />
</div>
</BrowserRouter>
)
export default AppRouter