I have a simple react-router-dom set and the links just simply won't work. My code is as follows:
index.js:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import "./containers/index.css";
import App from "./containers/App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<Router>
<App />
</Router>
,document.getElementById("root")
);
app.js:
import "./App.css";
import { Switch, Route } from "react-router-dom";
import Homepage from "../containers/Homepage";
import About from "../containers/Homepage";
import Contact from "../containers/Homepage";
import Registration from "../containers/Homepage";
import Services from "../containers/Homepage";
import Schedule from "../containers/Homepage";
import Gallery from "../containers/Homepage";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
const App = () => {
return (
<div className="App">
<Navbar />
<Footer />
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/registration" component={Registration} />
<Route path="/services" component={Services} />
<Route path="/schedule" component={Schedule} />
<Route path="/gallery" component={Gallery} />
</Switch>
</div>
);
}
export default App;
Homepage.js:
import React from 'react';
import { Link } from 'react-router-dom';
const Homepage = () => (
<div>
<h2>Homepage</h2>
<Link to="/about"> About </Link>
</div>
);
export default Homepage;
About.js
import React from 'react';
import { Link } from 'react-router-dom';
const About = () => (
<div>
<h2>About</h2>
<Link to="/"> Home </Link>
</div>
);
export default About;
All other components are simple dummy components, similar to about and homepage. Just trying to get the routing to work before proceeding.
What am I missing?
import "./App.css";
import { Switch, Route } from "react-router-dom";
import Homepage from "../containers/Homepage";
import About from "../containers/Homepage";
import Contact from "../containers/Homepage";
import Registration from "../containers/Homepage";
import Services from "../containers/Homepage";
import Schedule from "../containers/Homepage";
import Gallery from "../containers/Homepage";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
I think you could have a copy-paste error, your "About" has been imported as Homepage.
"import About from "../containers/Homepage";"
Related
I am having difficulty passing props via react router. Based on my understanding, there is a new way to pass props in React Router V6.
However, the props is still not showing up. Can some one take a look? thank you.
The props I am trying to pass is <Route path="/products" element={< Products sortBy={'newest'} />} />
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();
App.js
import ReactDOM from "react-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import Posts from "./components/posts";
import Home from "./components/home";
import Dashboard from "./components/admin/dashboard";
import ProductDetails from "./components/productDetails";
import NotFound from "./components/notFound";
import {Routes, Route} from 'react-router-dom'
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Routes>
<Route path="/products" element={< Products sortBy={'newest'} />} />
<Route path="/posts/2018/06" element={<Posts/>} />
<Route path="/admin" element={<Dashboard/>} />
<Route path="/" element={<Home/>} />
</Routes>
</div>
</div>
);
}
}
export default App;
Product.js
import React, { Component } from "react";
class Products extends Component {
state = {
products: [
{ id: 1, name: "Product 1" },
{ id: 2, name: "Product 2" },
{ id: 3, name: "Product 3" }
]
};
render() {
return (
<div>
<h1>Products</h1>
<ul>
{this.state.products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))}
</ul>
</div>
);
}
}
export default Products;
You are passing the props correctly. Can you please attach the code inside your <Products/> component?
Also, to enable routing in your react project, you need the implementations BrowserRouter, Routes and Route (React Basis Tutorials, BrowserRouter, Switch and Routes). In your code BrowserRouter is missing:
import ReactDOM from "react-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import Posts from "./components/posts";
import Home from "./components/home";
import Dashboard from "./components/admin/dashboard";
import ProductDetails from "./components/productDetails";
import NotFound from "./components/notFound";
// Here import BrowserRouter
import {BrowserRouter as Router,Routes, Route} from 'react-router-dom'
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
//Wrap Routes inside BrowserRouter (imported as Router)
<Router>
<Routes>
<Route path="/products" element={< Products sortBy={'newest'} />} />
<Route path="/posts/2018/06" element={<Posts/>} />
<Route path="/admin" element={<Dashboard/>} />
<Route path="/" element={<Home/>} />
</Routes>
<Router>
</div>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();
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
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
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.