Develop Reference

How to navigate to homepage upon form submit in react web using react-router-dom v6.2.1?

I have a Smart component class page PhoneDirectory.js, where I have used BrowserRouter and Route to route to the ShowSubscribers page("/") and AddSubscribers page ("/add"). My requirement is to redirect to the ShowSubscribers page("/") upon form submission on the AddSubscribers page but not understand how to implement that. I tried using this.props.history.push("/") but it isn't working. I am new to React, can anyone please help?
import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import {BrowserRouter , Route, Routes} from 'react-router-dom';
export default class PhoneDirectory extends React.Component{
constructor(){
super();
this.state = {[]};
}
addSubscribers = (subscribers) =>{...}
deleteSubscribers = (subscriberId) =>{...}
render() {
return (
<BrowserRouter>
<Routes>
<Route exact path='/' element={<ShowSubscribers deleteSubscribers={this.deleteSubscribers} subscribersList={this.state.subscribersList}/>}/>
<Route exact path='/add' element={<AddSubscriber addSubscribers={this.addSubscribers}/>}/>
</Routes>
</BrowserRouter>
)
}
}
Dumb component AddSubscriber page
import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
import {Link} from "react-router-dom";
export default class AddSubscriber extends React.Component {
constructor() {
super();
this.state = {
id: 0,
name:'',
phone:''
}
}
onChangeHandler = (event) =>{...}
onFormSubmitted = (event) =>{
event.preventDefault();
this.props.addSubscribers(this.state);
this.setState({id:0, name:"", phone:''});
// Need logic to redirect to "/" i.e., ShowSubscribers page
}
render() {
return (<div>
<Header heading="Add Subscriber"/>
<div className="component-body-container">
<Link to="/">
<button className="custom-btn">Back</button>
</Link>
<form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
...............
<button type="submit" className="custom-btn add-btn">Add</button>
</div>
</form>
</div>
</div>)}
}
I tried this.props.history.push("/"), but it didn't worked.

react-router-dom v6 support only hooks version i suggest since you use class component to downgrade the version of react-router-dom in package.json.
"dependencies": {
...
"react-router-dom": "5.2.1",
},
Now you need to run : npm install or yarn install
Your Route component will look like that
import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
export default class PhoneDirectory extends React.Component{
constructor(){
super();
this.state = {[]};
}
addSubscribers = (subscribers) =>{...}
deleteSubscribers = (subscriberId) =>{...}
render() {
return (
<Router>
<Switch>
<Route exact path='/'>
<ShowSubscribers {...your props goes here}/>
</Route>
<Route exact path='/add'>
<AddSubscriber {...your props goes here}/>
</Route>
</Switch>
</Router>
)
}
}
Now you are able to call this.props.history.push
import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
export default class AddSubscriber extends React.Component {
constructor() {
super();
this.state = {
id: 0,
name:'',
phone:''
}
}
onChangeHandler = (event) =>{...}
onFormSubmitted = (event) =>{
event.preventDefault();
this.props.addSubscribers(this.state);
this.setState({id:0, name:"", phone:''});
// Need logic to redirect to "/" i.e., ShowSubscribers page
}
render() {
return (<div>
<Header heading="Add Subscriber"/>
<div className="component-body-container">
<button className="custom-btn" onClick={()=>this.props.history.push('/')} >Back</button>
<form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
...............
<button type="submit" className="custom-btn add-btn">Add</button>
</div>
</form>
</div>
</div>)}
}

I think that you need to wrap your AddSubscriber page with withRouter HOC
class AddSubscriber extends React.Component{
...some-code....
}
export default withRouter(AddSubscriber)

you need navigation logic (this.props.history.push("/"))
to be located a addScubscribers page.
(you have it at "homepage" instead)

React Router returns blank page with correct pathing

I'm new to react. I'm following a tutorial, and my code is exactly the same as the tutorial, but the result isn't. Basically, my page routes are returning a blank page. There's no error in the console, so I'm not sure what I'm doing wrong. Here's my code
Homepage.js
import React, { Component } from "react";
import Login from "./Login";
import CreateUser from "./CreateUser";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
} from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<Switch>
<Route exact path="/">
<p>This is the homepage</p>
</Route>
<Route path="/login" component={Login} />
<Route path="/createuser" component={CreateUser} />
</Switch>
</Router>
);
}
}
Login.js Component
import React, { Component } from "react";
export default class Login extends Component {
constructor(props) {
super(props);
}
render() {
return <p>This is the Login Page</p>;
}
}
CreateUser.js Component
import React, { Component } from "react";
export default class CreateUser extends Component {
constructor(props) {
super(props);
}
render() {
return <p>This is the Create User Page</p>;
}
}
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"); // get 'app' div
render(<App />, appDiv); // place App component into app div
I've tried changing the import "react" code in line 1 to import 'react' among other things.
Any ideas? Thanks!

Try changing the paths to "/login" and "/createuser" in Homepage.js

I am using Django on the backend of the React project I'm working on. The routes were not connected to the url.py file for the url configuration for my Django app.

How to properly define Higher Order Component in reactjs?

I am trying to learn HOC in reactjs and trying to understand this basic example..
I have 3 files named First.js, Second.js and App.js. Now how I need to define those files so that computation done in first file should be accessible to second file.
App.js
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import First from './First';
import Second from './Second';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={First}/>
<Route exact path='/Second' component={Second}/>
</Switch>
</Router>
);
}
}
export default App;
First.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Second from './Second';
class First extends Component{
constructor(props){
super(props);
this.state={
number : 1,
};
}
increment = event => {
this.setState({
number : this.state.number + 1
});
}
decrement = event => {
this.setState({
number : this.state.number - 1
});
}
render(){
return(
<div>
{this.state.number}
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<Second number={this.state.number}/>
<Link to='/Second'>Second</Link>
</div>
);
}
}
export default First;
Second.js
import React, {Component} from 'react';
class Second extends Component{
render(){
return(
<div>
{this.props.number}
</div>
);
}
}
export default Second;
I want to access First.js variable in second.js. Give me solution.
Thanks in advance.

Try this
<Route path="/Second" render={()=> (
<div>
100
</div>
)}/>

The above implementation that you have shown isn't of an HOC, rather a simple Route implementation, Since you are rendering the Second component inside of First you would want to render the /second route inside first
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import First from './First';
import Second from './Second';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/' component={First}/>
</Switch>
</Router>
);
}
}
export default App;
First.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Second from './Second';
class First extends Component{
constructor(props){
super(props);
this.state={
number : 1,
};
}
increment = event => {
this.setState({
number : this.state.number + 1
});
}
decrement = event => {
this.setState({
number : this.state.number - 1
});
}
render(){
return(
<div>
{this.state.number}
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<Route path="/Second" render={(props)=> <Second number={this.state.number} {...props}/>} />
<Link to='/Second'>Second</Link>
</div>
);
}
}
export default First;

Passing state value from component to component?

I've seen many answer on this website and in official docs and many other places. But I couldn't able to achieve results. That's why I'm posting this question.
SO, my question is I have 3 files named:
App.js, SignUp.js and Welcome.js.
My task is to get value in form from SignUp.js page and print that value to the Welcome.js component. I read about lifting state up and higher order components but couldn't able to do it.
Any help is appreciated.
Here's my code:
App.js:
import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
render(){
var homeMessage = () =>{
return(<div><SignUp /></div>);
}
return(
<Router>
<div>
<Route exact path="/src/Welcome" component={Welcome}/>
<Route exact path="/" component={homeMessage}/>
</div>
</Router>
);
}
}
export default App;
SignUp.js;
import React,{Component} from "react";
import {Link} from "react-router-dom";
export default class SignUp extends Component {
constructor(props){
super(props);
this.state = {
firstName:''
};
}
inputData = event =>
{
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event =>
{
event.preventDefault();
}
render(){
return(
<div>
<form onSubmit={this.submitData}>
<input type="text" name="firstName" onChange={this.inputData}/>
<button type="submit"> Submit</button>
</form>
<Link to="/src/Welcome">Welcome</Link>
</div>
);
}
}
Welcome.js:
import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
render(){
return(
<div>
{this.state.firstName}
</div>
);
}
}
"And please give answer if possible then in react-way only not redux or any other library. Because as per Dan Abramov article "Thinking in React" so first I want to try all scope which is available in react only."

Pass the data back to the parent from SignUp component and then pass it as a prop to the Welcome component. The other way is to store the SignUp component state in the App component so that you don't need to pass it back up when you submit.
App.js
import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
state = {
firstName: ''
}
onSignIn = (value) => {
this.setState({firstName: value});
}
render(){
return(
<Router>
<div>
<Route exact path="/src/Welcome" render={(props) => <Welcome firstName={this.state.firstName} {...props}/>}/>
<Route exact path="/" render={(props) =>{
return(<div><SignUp onSignIn={this.onSignIn} {...props} /></div>);
}}/>
</div>
</Router>
);
}
}
export default App;
SignUp.js
export default class SignUp extends Component {
constructor(props){
super(props);
this.state = {
firstName:''
};
}
inputData = event =>
{
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event =>
{
event.preventDefault();
this.props.onSignIn(this.state.firstName);
}
render(){
return(
<div>
<form onSubmit={this.submitData}>
<input type="text" name="firstName" onChange={this.inputData}/>
<button type="submit"> Submit</button>
</form>
<Link to="/src/Welcome">Welcome</Link>
</div>
);
}
}
Welcome.js
import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
render(){
return(
<div>
{this.props.firstName}
</div>
);
}
}
Some useful links:
How to pass data from child component to its parent in ReactJS?
Passing custom props to router component in react-router v4
ReactJS - Lifting state up vs keeping a local state

react router not working for nested components(transitionTo is invalid)

I have parent grandchild dependency in my code.The main element is App.js
import React from 'react'
import ReactDOM from 'react-dom'
import {ExpenseApp} from './expense-app.js'
import {Switch, BrowserRouter, Route} from 'react-router-dom'
import {FullBlog} from './FullBlog.js'
class App extends React.Component{
render(){
return(
<BrowserRouter>
<Route path='/' component={ExpenseApp}/>
<Route path='/fullblog' component={FullBlog}/>
</BrowserRouter>
)
}
}
ReactDOM.render(<ExpenseApp data={data}/>, document.getElementById('container'))
The expenseapp.js has a button through which I want another page to get loaded
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
//import data from '../data.json';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';
import {FullBlog} from './FullBlog.js';
import {Author} from './Author.js'
class ExpenseApp extends React.Component{
constructor(props){
super(props);
this.state={
data:this.props.data,
list:[]
}
}
render(){
var data=this.state.data;
var list=this.state.list;
var len= Object.keys(data).length;
for(var i=0;i<len;i++){
//console.log(data[i]);
list.push(<Author key={i} i={i} data={data[i]}/>);
}
return(
<div>
{list}
</div>
)
}
}
module.exports={
ExpenseApp:ExpenseApp
}
the Author.js is like this
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
//import data from '../data.json';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';
import {FullBlog} from './FullBlog.js'
class Author extends React.Component{
constructor(props){
super(props);
this.state={
data:this.props.data,
load:false,
content:'',
Author:'',
Book:''
}
this.loadBlog=this.loadBlog.bind(this);
}
loadBlog(i){
var that=this;
var data=this.state.data[i];
that.setState({
// load:true,
Content:this.props.data.Content,
})
that.context.Router.transitionTo(null,'/fullblog');
}
render(){
if(this.state.load===false){
return(
<div onClick={this.loadBlog} >
<div>{this.props.data.Author}</div>
<div>{this.props.data.Book}</div>
</div>
)
}//else{
// return(<Link to="/fullblog"><FullBlog data={this.state.data}/></Link>)
// }
}
}
Author.contextTypes = {
Router: function contextType() {
return React.PropTypes.func.isRequired;
}
};
module.exports={
Author:Author
}
And then there is FullBlog.js
class FullBlog extends React.Component{
render(){
return(<div>Hello world</div>)
}
}
module.exports={
FullBlog:FullBlog
}
And the error that I am getting is
But through this, I am not able to navigate to anything.I am using React-router for the first time and I dont know what the issue is. Thanks

You should use react routers withRouter() higher order function. You pass in your component and withRouter adds a router object to your component props.
import { withRouter } from 'react-router-dom';
// ...
export default withRouter(Author)
Then instead of calling Router.transitionTo (I'm not sure thats a thing) you would call this.props.router.history.push('/somepath')