I know this question asked many times, but I can't get the right answer, just creating a small project to learn reactjs
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import routes from './config/routes';
import jquery from 'jquery';
import metismenu from 'metismenu';
import bootstrap from 'bootstrap';
import '../../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../../../../node_modules/font-awesome/css/font-awesome.css'
import '../../../../node_modules/animate.css/animate.min.css'
import '../../css/style.css'
ReactDOM.render(
<Router>{routes}</Router>,
document.getElementById('indo')
);
config/routes.js
import React from 'react'
import Main from '../layouts/Main';
import Blank from '../layouts/Blank';
import MainView from '../views/Main';
import MinorView from '../views/Minor';
// import { Router, IndexRedirect} from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';
export default (
<Router>
<Route path="/">
<Main>
<Route path="/main" />
<Route path="main" component={MainView}> </Route>
<Route path="minor" component={MinorView}> </Route>
</Main>
</Route>
</Router>
);
here is my Main.js, the source of error
import React from 'react';
import Progress from '../common/Progress';
import Navigation from '../common/Navigation';
import Footer from '../common/Footer';
import TopHeader from '../common/TopHeader';
import { correctHeight, detectBody } from './Helpers';
class Main extends React.Component {
render() {
let wrapperClass = "gray-bg " + this.props.location.pathname;
return (
<div id="wrapper">
<Progress />
<Navigation location={this.props.location}/>
<div id="page-wrapper" className={wrapperClass}>
<TopHeader />
{this.props.children}
<Footer />
</div>
</div>
)
}
Dev tools tells error in the line, "let wrapperClass = "gray-bg " + this.props.location.pathname;"
Any ideas?
Try using
import {MainView} instead of import MainView.
Also add an export at the beginning of MainView class declaration.
like
export class MainView extends React.Component ...
the changes should lead to the following result:
route.js:
import React from 'react'
import Main from '../layouts/Main';
import Blank from '../layouts/Blank';
import {MainView} from '../views/Main';
import {MinorView} from '../views/Minor';
// import { Router, IndexRedirect} from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';
export default (
<Router>
<Route path="/">
<Main>
<Route path="/main" />
<Route path="main" component={MainView}> </Route>
<Route path="minor" component={MinorView}> </Route>
</Main>
</Route>
);
Main.js:
import React from 'react';
import Progress from '../common/Progress';
import Navigation from '../common/Navigation';
import Footer from '../common/Footer';
import TopHeader from '../common/TopHeader';
import { correctHeight, detectBody } from './Helpers';
export class MainView extends React.Component {
render() {
let wrapperClass = "gray-bg " + this.props.location.pathname;
return (
<div id="wrapper">
<Progress />
<Navigation location={this.props.location}/>
<div id="page-wrapper" className={wrapperClass}>
<TopHeader />
{this.props.children}
<Footer />
</div>
</div>
)
}
Haven't tried it out but it sounds to me that the issue might be an import issue.
Let me know if it works.
I just found solution
in config/route.js, I changed to
<Router>
<div>
<Route path="/" component={Main}/>
<Route path="main" component={MainView}/>
<Route path="minor" component={MinorView}/>
</div>
</Router>
Hope it helps others
Related
I'm using React Router with the Link tag to handle the routing between the pages on my app. Well, when I click on the home page from the landing page the URL changes but the DOM does not show any of the code that I have for the home component Also I'm not getting any errors and the home page is just blank. I have included the code for my Index.js and App.js so you can see. Just a side note I'm using react-router-dom V 5.2.0, and react-redux V 7.2.2.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root')
);
reportWebVitals();
App.js
import React from 'react';
import { Route, BrowserRouter, Switch, withRouter} from 'react-router-dom';
//COMPONENTS IMPORTS
import LandingPage from './components/LandingPage';
import HomePage from './components/HomePage';
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path= "/" component = {LandingPage} />
<Route exact path = "/HomePage" component ={HomePage} />
</Switch>
</BrowserRouter>
</div>
)
}
export default withRouter (App);
LandingPage
//tools import
import React, { Component } from 'react'
import { Link } from 'react-router-dom';
//css Import
import '../App.css';
//Animation Import
import Anime from 'react-anime';
//Image Imports
import silentCareLogo from '../Images/silentCareLogo.png';
// React-icons//
import {BsArrowRightShort} from "react-icons/bs";
export default class landingPage extends Component {
render() {
return (
<div className="landingContainer">
<div className="logoContainer">
<Anime className = "animeDiv" opacity = {[0,1]} duration={25000}>
<img src={silentCareLogo} className="companyLogo" alt="logo" />
</Anime>
<Anime className="animeHmeBtnDiv" opacity = {[0,1]} duration={20000} delay={2000}>
<Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>
</Anime>
</div>
</div>
)
HomePage
import React, { Component } from 'react'
//css Import
import '../App.css';
//Animation Import
import Anime from 'react-anime';
export default class HomePage extends Component {
render() {
return (
<div>
<div className ="homeContainer">
<h1>home page</h1>
</div>
</div>
)
}
}
Please check you app.js You home page component is in /HomePage
and you are trying to get it in /home
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/HomePage' component={HomePage} />
</Switch>
</BrowserRouter>
</div>
);
}
And in the Landing page, you are trying to get home page in /home path which does not exist in your app.
<Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>
whereas your component is in " /HomePage "
Solution:
change your path in App.js from /HomePage to /home
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/home' component={HomePage} />
</Switch>
</BrowserRouter>
</div>
);
}
I have the following index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';
ReactDOM.render(
<BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));
the following in main.js:
import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';
class Main extends Component {
render() {
return (
<div id="main-layout">
<div id="main-header">
<div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
<div><h2>Lil Test By Me</h2></div>
</div>
<div id="main-content">
<NavMenu />
<Content />
</div>
<div id="main-footer">
<div>Copyright © 2020. Powered By me. All Rights Reserved.</div>
</div>
</div>
);
}
}
export default Main;
And The following in content.js
import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
It it my attempt to create an SPA with the Content component as my target for all my subsequent pages; however, I am clearly doing something wrong as I am getting all kinds of errors all over the place. Can anyone immediately see what I am doing incorrectly here?
Route and Switch needs to be imported from react-router-dom instead of react-dom
import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
Use react-router-dom instead of react-router and then
change your content.js code to this.
import React, { Component } from 'react';
import {Route, Switch, BrowserRouter as Router} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Router>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route path="/invoicing" component={Invoicing} />
</Switch>
</Router>
)
}
};
export default Content
notice that I have added Router above the switch. and changed react-router to react-router-dom and also transformed the routes to lowercase
To take you through my file layout I have an app.js
import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
ReactDOM.render(<AppRouter />,document.getElementById('app'));
which renders AppRouter.js :
//Importing Libraries
import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
//Importing Pages
import HomePage from '../pages/HomePage';
import F from '../pages/F';
import F from '../pages/Fe';
import F from '../pages/F';
import F from '../pages/F';
import FAQPage from '../pages/FAQPage';
import AboutUsPage from '../pages/AboutUsPage'
import ContactPage from '../pages/ContactPage';
import FranchisePage from '../pages/FranchisePage';
import GiftPage from '../pages/GiftPage';
import NotFoundPage from '../pages/NotFoundPage';
//Importing Components
import Header from '../components/Header';
import Footer from '../components/Footer';
//Router configuration
/*switch is going to look through the route paths in order until it finds a match */
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={HomePage} exact={true}/>
<Route path="/F" component={F} exact={true}/>
<Route path="/F" component={F} exact={true}/>
<Route path="/birthday" component={F} exact={true}/>
<Route path="/F" component={F} exact={true}/>
<Route path="/faq" component={FAQPage} exact={true}/>
<Route path="/about-us" component={AboutUsPage} exact={true}/>
<Route path="/contact" component={ContactPage} exact={true}/>
<Route path="/franchise" component={FranchisePage} exact={true}/>
<Route path="/gift" component={GiftPage} exact={true}/>
<Route component={NotFoundPage}/>
</Switch>
<Footer/>
</div>
</BrowserRouter>
);
export default AppRouter;
(some names were changed to f for employee privacy reasons)
The pages that are just text components render just fine when I click them, for example the about us page:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
const AboutUsPage = () => (
<div>
Content For AboutUsPage
</div>
);
export default AboutUsPage;
But when I want to render a component on those pages nothing shows up (the whole page goes blank)
Here is what I'm trying to do:
Here is the FAQ Page
import React from 'react';
import ReactDOM from 'react-dom';
import FAQInfo from './FAQRevealnfo';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
const FAQPage = () => (
<div id>
<h1>FREQUENTLY ASKED QUESTIONS</h1>
//trying to render FAQInfo
<FAQInfo
question="Question"
answer="answer"
>
</FAQInfo>
</div>
);
export default FAQPage;
and here is the component i'm trying to render inside of it:
import React from 'react';
export default class FAQRevealInfo extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
visibility: false
};
this.question = this.question.bind(this);
this.answer = this.answer.bind(this);
}
toggle (){
this.setState((prevState) => {
return {
visibility: !prevState.visibility
};
});
}
render(){
return (
<div>
<h1>{this.question}</h1>
<button onClick = {this.toggle}>
</button>
<div>
<p>{this.state.visibility&&this.answer}</p>
</div>
</div>
);
}
}
I have changed the constructor to this.question="text" and this.answer="text" and rendering with this.props, it now works.
I just upgraded to React Router v4 with a react 15.4.2 app based on a boilerplate from Fountain JS and after reading this article, I wrote this:
// Index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import {Main} from './app/pages/main';
import {App} from './app/pages/app';
import './index.scss';
const MainRouter = () => (
<div>
<main>
<Switch>
<Route path="/home" component={Main}/>
<Route path="/app" component={App}/>
</Switch>
</main>
</div>
);
ReactDOM.render(
<BrowserRouter>
<MainRouter/>
</BrowserRouter>,
document.getElementById('root')
);
// App.jsx
import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';
import PropTypes from 'prop-types';
import {Dashboard} from './app/dashboard';
import {Money} from './app/money';
import {Header} from '../tpl/header';
import {Footer} from '../tpl/footer';
export class App extends Component {
render() {
return (
<div>
<Header/>
<main>
<Switch>
<Route path="/app/dashboard" exact component={Dashboard}/>
<Route path="/app/money" exact component={Money}/>
</Switch>
</main>
<Footer/>
</div>
);
}
}
// dashboard.jsx
import React, {Component} from 'react';
export class Dashboard extends Component {
render() {
return (
<div>
<h1>This is the Dashboard</h1>
</div>
);
}
}
Navigating to http://localhost:3000/app/ seems to work fine but navigating to http://localhost:3000/app/dashboard gives 404. What could I be possibly getting wrong?
PS Even on the routes that work, adding a trailing slash will not work.
You need to correct dashboard route at the end of App's render. No need for another Switch over there. So in your App.jsx file's render method :
render() {
return (
<div>
...
<Route path="/app/dashboard" component={Dashboard}/>
</div>
);
}
I'm following an online React tutorial. In the tutorial React Router 3 used while I got React Router 4 when I downloaded React Router (and react-router-dom). The code in the tutorial looks like this.
import React from "react";
import {render} from "react-dom";
import {Router, Route, browserHistory} from 'react-router'
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<Router>
<Route path={"user"} component={User}/>
<Route path={"home"} component={Home}/>
</Router>
);
}
}
render(<App />, window.document.getElementById('app'));
I'm trying to rewrite the code to work with React Router 4 like this:
import React from "react";
import {render} from "react-dom";
import {Switch, BrowserRouter, Route} from 'react-router-dom'
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path={"user"} component={User}/>
<Route path={"home"} component={Home}/>
</Switch>
</BrowserRouter>
);
}
}
render(<App />, window.document.getElementById('app'));
The code for User.js looks like this:
import React from "react";
export class User extends React.Component {
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: </p>
</div>
);
}
}
When I try localhost:8080/user it returns nothing.
I only get
<div id="app">
<!-- react-empty: 1 -->
</div>
What is it I need to change in my code?
Try with
<Route path="/user" component={User}/>
I have answered this Issue here
Wrap your <App> in <BrowserRouter> in index.js