Thanks for the tutorial. Need more help
Thanks so much! So many of the React tutorials out there get so complex very quickly. I feel like you have a great balance of detail which is explained very clearly and in a way you donât need to be an expert to implement. Exactly what I needed to carry learnings across to my own React SPA project - thanks again!!
Glad you liked the content and the way it was presented
Thanks, I just need clone the code from github, thatâs save my time.
Hi @kirupa ,
I really enjoy your articles on React. Theyâre extremely helpful and informative with learning React and gaining confidence with it.
Iâm running into a bit of an issue with React Router, though. Iâve adapted this tutorial into a bit larger of an app to give it navigation, but it seems that if I use components with state in the routes, I run into this warning and my app stops functioning properly after navigating away from the component with state: âCanât call setState on an unmounted componentâŚâ
Iâm sure itâs something simple that Iâm missing, but Iâve been fighting with this for a while now and my frustration is clouding my ability to spot details. Would you mind giving some advice on increasing the complexity of an app that uses React Router?
I have a project on Github that exhibits this behavior if you need to see it in action
You are running into a very common issue that everybody runs into. This blog post provides more details on what you can try: https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html
Let me know if that helps
Well, see hereâs the thing about that. Iâve run into a few articles that mention this issue, and it makes sense, but I donât think Iâm doing this exactly. Iâm not using isMounted at all, and Iâm not using Flux for this project. Iâm simply calling setState in a function thatâs called in componentDidMount and then in a handler thatâs passed to a lower-level component (which itself never calls setState), which looks legal to my inexperienced eyes.
Hereâs the project Iâm working on that exhibits this issue. Youâll see the BrowserRouter used in src/App.js and itâs the handleSelect(id) function in the ADD2Characters class that raises the warning.
Could it have something to do with the onClick in ADD2CharacterTable? I just noticed that while looking it over again
I think I just managed something⌠I just made a commit to that repo that converts the ADD2CharacterTable component to a function component, and this appears to get around the issue. Would you agree with this solution, or is it just a hack made by someone who doesnât know any better?
After looking through your code, I am not 100% sure why you had the original problem to begin with haha. With that said, avoiding any knowledge of state by going to a functional component is one way of avoiding this issue entirely. Since your app works fine now, I wouldnât question it too much!
Yeah, I agree, as long as it works. Oh well, no worries, haha
I really appreciate your taking a look, too
Is the finished code for this tutorial hosted somewhere? Thanks!
have been solve
Follow this
import React, {
Component
} from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Home from './Home'
import Stuff from './Stuffâ
import Contact from './Contact'
export default class Main extends Component {
render() {
return (
<Router>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li>
<Link to="/">Home</Link>
</li>
<li><a href="/stuff">Stuff</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</Router>
)
}
}
What is the problem here?
Thank you for a very well written, detailed article. This post is a very good start to understand React router for SPA
I created build for this application, and then i kept that folder on httpd server. But itâs not working. Am I did any thing wrong here?
What error are you seeing? Are the paths to the JS and CSS still accurate in the HTML file?
index.js >>>
import React from âreactâ;
import ReactDOM from âreact-domâ;
import Home from â./Homeâ;
ReactDOM.render(< Home />, document.getElementById(ârootâ));
Home.js
import React, {Component} from âreactâ;
import ReactDOM from âreact-domâ;
import {
Route,
NavLink,
HashRouter
} from âreact-router-domâ;
import Login from â./Loginâ;
import SignUp from â./SignUpâ;
class Home extends Component {
render (){
return (
< HashRouter>
< div>
< ul>
< li>< NavLink to="/ SignUp">SignUp</ NavLink>< /li>
< /ul>
< /div>
</ HashRouter>);
}
}
export default Home;
SignUp.js
import React, {Component} from âreactâ;
import ReactDOM from âreact-domâ;
import SignUpCSS from â./SignUpCSS.cssâ
class SignUp extends Component {
render(){ return (
Sign Up
Please fill in this form to create an account.
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required/>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required/>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required></input>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me </input>
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>);
}}
export default SignUp;
Please find the above three page
I am not able to redirect SignUp even not getting any error whats I am missing here
Can you please make the same single page application using next js router , please I request or send me the code : mail : [email protected]