I just started to learn react js and created a sample app, in which application has header, footer with content. To add header footer on each page I created root.js and include header, footer there.
as props.children can render each nested route I added {this.props.children} inside root.js.
But When I clicked on any Links, nothing is happening, previous page(home) still rendered.
I could not understand whats going on and how to resolve this. Please help me, It already took me 2 days searching on google.
Edit:
Now working fine. Problem was that I added links inside
But now another problem is happening. whenever I refresh page everything has gone. pages are not found shows
Edit:
Now working after page refresh by adding these line in
package.json
"scripts": {
"start": "npm run build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
}
index.js
import React from "react";
import { render } from "react-dom";
import { Home } from "./pages/home/index.jsx";
import { Root } from "./ponent/layout/root";
import { Blog } from "./pages/blog/index.jsx";
import { About } from "./pages/about/index.jsx";
import { Contact } from "./pages/contact/index.jsx";
import { Portfolio } from "./pages/portfolio/index.jsx";
import { Services } from "./pages/services/index.jsx";
import { Match } from 'react-router';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import {IndexRoute, browserHistory, Switch } from 'react-router';
class App extends React.Component {
render(){
return(
<Router>
<Root>
<Switch>
<Route exact path={"/"} ponent={Home} />
<Route path="/blog" ponent={Blog}/>
<Route path="/contact" ponent={Contact}/>
<Route path="/portfolio" ponent={Portfolio}/>
<Route path="/about" ponent={About}/>
<Route path="/services" ponent={Services}/>
<Route path="/home" ponent={Home} />
</Switch>
</Root>
</Router>
);
}
}
render( <App /> , window.document.getElementById("app"));
root.js
import React from 'react';
import { render } from 'react-dom';
import { Header } from './header/index';
import { Footer } from './footer/index';
export class Root extends React.Component {
constructor(props){
super();
}
render(){
return(
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
Components:
/blog/index.jsx
/home/index.jsx
/contact/index.jsx
import React from "react";
import {render} from "react-dom";
export class Contact extends React.Component {
render() {
return (
< div id = "fh5co-contact-section" >
<div className="container">
<div className="row">
<div className="col-md-6 col-md-offset-3 text-center fh5co-heading">
<h2>Contact</h2>
<p>
<span>Created with
<i className="sl-icon-heart"></i>
by the fine folks at
<a href="">FreeHTML5.co</a>
</span>
</p>
</div>
</div>
<div className="row">
<div className="col-md-3">
<h3>Contact Info.</h3>
<ul className="contact-info">
<li>
<i className="sl-icon-map"></i>198 West 21th Street, Suite 721 New York NY 10016</li>
<li>
<i className="sl-icon-phone"></i>+ 1235 2355 98</li>
<li>
<i className="sl-icon-envelope-open"></i>
<a href="#">[email protected]</a>
</li>
<li>
<i className="sl-icon-globe-alt"></i>
<a href="#">www.yoursite</a>
</li>
</ul>
</div>
<div className="col-md-8 col-md-push-1 col-sm-12 col-sm-push-0 col-xs-12 col-xs-push-0">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<input className="form-control" placeholder="Name" type="text" /></div>
</div>
<div className="col-md-6">
<div className="form-group">
<input className="form-control" placeholder="Email" type="text" /></div>
</div>
<div className="col-md-12">
<div className="form-group">
<textarea
name=""
className="form-control"
id=""
cols="30"
rows="7"
placeholder="Message"></textarea>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<input value="Send Message" className="btn btn-primary" type="submit"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
header.js
import React from "react";
import {render} from "react-dom";
import { Link } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
export const Header = (props) => {
return(
<header id="fh5co-header" role="banner">
<div className="container">
<div className="header-inner">
<h1><i className="sl-icon-energy"></i><Link to="/">Lesser</Link></h1>
<nav role="navigation">
<ul>
<li><Link className="active" to="/">Home</Link></li>
<li><Link to="/blog">Blog</Link></li>
<li><Link to="/portfolio">Portfolio</Link></li>
<li><Link to="/services">Services</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
</div>
</div>
</header>
);
};
I just started to learn react js and created a sample app, in which application has header, footer with content. To add header footer on each page I created root.js and include header, footer there.
as props.children can render each nested route I added {this.props.children} inside root.js.
But When I clicked on any Links, nothing is happening, previous page(home) still rendered.
I could not understand whats going on and how to resolve this. Please help me, It already took me 2 days searching on google.
Edit:
Now working fine. Problem was that I added links inside
But now another problem is happening. whenever I refresh page everything has gone. pages are not found shows
Edit:
Now working after page refresh by adding these line in
package.json
"scripts": {
"start": "npm run build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
}
index.js
import React from "react";
import { render } from "react-dom";
import { Home } from "./pages/home/index.jsx";
import { Root } from "./ponent/layout/root";
import { Blog } from "./pages/blog/index.jsx";
import { About } from "./pages/about/index.jsx";
import { Contact } from "./pages/contact/index.jsx";
import { Portfolio } from "./pages/portfolio/index.jsx";
import { Services } from "./pages/services/index.jsx";
import { Match } from 'react-router';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import {IndexRoute, browserHistory, Switch } from 'react-router';
class App extends React.Component {
render(){
return(
<Router>
<Root>
<Switch>
<Route exact path={"/"} ponent={Home} />
<Route path="/blog" ponent={Blog}/>
<Route path="/contact" ponent={Contact}/>
<Route path="/portfolio" ponent={Portfolio}/>
<Route path="/about" ponent={About}/>
<Route path="/services" ponent={Services}/>
<Route path="/home" ponent={Home} />
</Switch>
</Root>
</Router>
);
}
}
render( <App /> , window.document.getElementById("app"));
root.js
import React from 'react';
import { render } from 'react-dom';
import { Header } from './header/index';
import { Footer } from './footer/index';
export class Root extends React.Component {
constructor(props){
super();
}
render(){
return(
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
Components:
/blog/index.jsx
/home/index.jsx
/contact/index.jsx
import React from "react";
import {render} from "react-dom";
export class Contact extends React.Component {
render() {
return (
< div id = "fh5co-contact-section" >
<div className="container">
<div className="row">
<div className="col-md-6 col-md-offset-3 text-center fh5co-heading">
<h2>Contact</h2>
<p>
<span>Created with
<i className="sl-icon-heart"></i>
by the fine folks at
<a href="http://freehtml5.co">FreeHTML5.co</a>
</span>
</p>
</div>
</div>
<div className="row">
<div className="col-md-3">
<h3>Contact Info.</h3>
<ul className="contact-info">
<li>
<i className="sl-icon-map"></i>198 West 21th Street, Suite 721 New York NY 10016</li>
<li>
<i className="sl-icon-phone"></i>+ 1235 2355 98</li>
<li>
<i className="sl-icon-envelope-open"></i>
<a href="#">[email protected]</a>
</li>
<li>
<i className="sl-icon-globe-alt"></i>
<a href="#">www.yoursite.</a>
</li>
</ul>
</div>
<div className="col-md-8 col-md-push-1 col-sm-12 col-sm-push-0 col-xs-12 col-xs-push-0">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<input className="form-control" placeholder="Name" type="text" /></div>
</div>
<div className="col-md-6">
<div className="form-group">
<input className="form-control" placeholder="Email" type="text" /></div>
</div>
<div className="col-md-12">
<div className="form-group">
<textarea
name=""
className="form-control"
id=""
cols="30"
rows="7"
placeholder="Message"></textarea>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<input value="Send Message" className="btn btn-primary" type="submit"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
header.js
import React from "react";
import {render} from "react-dom";
import { Link } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
export const Header = (props) => {
return(
<header id="fh5co-header" role="banner">
<div className="container">
<div className="header-inner">
<h1><i className="sl-icon-energy"></i><Link to="/">Lesser</Link></h1>
<nav role="navigation">
<ul>
<li><Link className="active" to="/">Home</Link></li>
<li><Link to="/blog">Blog</Link></li>
<li><Link to="/portfolio">Portfolio</Link></li>
<li><Link to="/services">Services</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
</div>
</div>
</header>
);
};
- Now all links working fine, But whenever I refresh page, it says page not found pages. – TheVinspro Commented Feb 7, 2018 at 4:41
- I am also using link inside router. How to separate them????? – Gutter Overflow Commented Apr 21, 2022 at 10:04
2 Answers
Reset to default 2I don't see any links in your post but in any case you have to use the NavLink ponent from React-Router-Dom and replace any anchor tags with it.
Example:
<NavLink to="/blog">Blog</NavLink>
instead of:
<a href="/blog">Blog</a>
also for sake of readability and clean code it is better to seperate sections into ponents, form in its own ponent, contact info in its own and so on
You can import Link from react-router-dom:
import Link from 'react-router-dom/Link';
and then use this <Link to='url'>display text</Link>