Hoping someone can help me as I am at my wits end trying to figure out why this isn't loading. The site compiles with no errors but then just hangs loading and whitescreen; nothing in the DOM either to point out what is wrong.
Here is the source code (https://github.com/Asutherland8219/react-portfolio)
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />
, document.getElementById('root')
);
App.js
import React from 'react'
import './App.css';
import Navbar from './components/Navbar/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Portfolio from './pages/Portfolio';
import Contact from './pages/Contact';
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path='/' exact component= {Home}/>
<Route path='/about' component= {About}/>
<Route path='/portfolio' component= {Portfolio}/>
<Route path='/contact' component= {Contact}/>
</Switch>
</Router>
);
}
export default App;
There is an error in your Button component.
<Button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onclick}
type={type}
>
{children}
</Button>
You are rendering Button in Button component.
Line 5 of your Navbar file says
import { Button } from '../Button/Button.css';
I find this weird, and this error may be the reason behind this error
function App() {
return (
<>
<Header/>
<Routes>
<Route path={HOMEPAGE_URL} element={<App/>}/>
..........
</Routes>
</>
);
}
In my case I used App as a component for the element, this will work like a recursive function and eventually kill the memory with a poup message.
I had this kind of error for the first time, where the website is loading all the time without any errors. Maybe this answer will help someone with the same problem.
Related
This question already has answers here:
React Router not working with Github Pages
(4 answers)
Closed 4 months ago.
I published my React project to GitHub pages and while I can see the favicon and main page title the actual project page is blank (nothing shows).
I tried most fixes I could find but nothing worked.
This is my App.JS:
import {BrowserRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<BrowserRouter>
<Pages/>
</BrowserRouter>
</div>
);
}
export default App;
and this is my Page routes:
import React from "react";
import { Route, Routes } from "react-router-dom";
import MainPage from "../components/MainPage";
import SpaceProFigGridDetails from "../components/SpaceProFigGridDetails";
import SpaceProMain from "../components/SpaceProMain";
import SpaceProSpaceGDetails from "../components/SpaceProSpaceGDetails";
function Pages() {
return (
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/spaceProMain" element={<SpaceProMain />} />
<Route
path="/spaceprospacegdetails/:image"
element={<SpaceProSpaceGDetails />}
/>
<Route
path="/spaceprofiggriddetails/:id"
element={<SpaceProFigGridDetails />}
/>
</Routes>
);
}
export default Pages;
I read here (a different post) to add this to your project, however I might not be doing it correctly:
<BrowserRouter basename={process.env.PUBLIC_URL}>
{/* routes */}
If this solutions still works, can someone clarify pls?
where exactly should I paste it? I tried on APPjs but my localhost "view" cashes.
You can see my project repository here
Thanks everyone for your help!
Cheers!
Thanks everyone for trying to help!
I really appreciate everyone who shared ideas to help me fix this error.
After hourssssss working on this issue I found the solution.
Instead of:
import {BrowserRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<BrowserRouter>
<Pages/>
</BrowserRouter>
</div>
);
}
export default App;
THIS SOLVED THE ISSUE:
import {HashRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<HashRouter>
<Pages/>
</HashRouter>
</div>
);
}
export default App;
So, first I had an issue with the routes not working, but I resolved that with react-router-dom's "baseline" property, but now despite the home page loading, the subsequent links render beneath the first component, which is supposed to dissapear entirely when the link is clicked.
It works fine locally.
This is my app.js
import React from 'react';
import './App.css';
import Navbar from './Component/Navbar/Navbar';
import RecipeList from './Component/RecipeList/RecipeList';
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import RecipeItemDetails from './Component/RecipeItemDetails/RecipeItemDetails';
function App() {
return (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<div className="App">
<Navbar/>
<Route exact path="/" component={RecipeList} />
<Route path="/recipes/:id" component={RecipeItemDetails} />
</div>
</BrowserRouter>
);
}
export default App;
any ideas? I've tried adding "exact" to the second route which didnt work, and I've also tried wrapping the router in a "switch", but that doesnt work either. I'm stumped.
your routes are inside el. so the the re rendered part when the route change is the Route components , and the div and navbar not re-rendered this is the reason you see the new routes beneath the first component, you should do something like this
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Route exact path="/" component={RecipeList} />
<Route path="/recipes/:id" component={RecipeItemDetails} />
</BrowserRouter>
and then in the RecipeList and RecipeItemDetails import the Navbar and enclose it in the desired
I'm new to React Router so if this has been asked before maybe someone could point me in the right direction! Basically I have a WordPress install that I'm pulling in my websites data from through the API.
I've created custom routes to query my pages and my posts by slug.
Using react router I was able to create a template called Page.js which changes dynamically using the code below.
However, now I'm trying to do the same exact thing with the blog posts but the app isn't using Blog.js its still defaulting back to Page.js
here's my App.js code...
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends React.Component {
render() {
return (
<Router>
<div>
<Header/>
<Route exact path="/" component={Home} />
<Route path="/:slug" component={Page} />
<Route path="/blog/:slug" component={Blog} />
<Footer/>
</div>
</Router>
);
}
}
export default App;
More Details:
Page.js works by checking const { slug } = this.props.match.params; and then querying WordPress using that slug to pull in the data it needs. In componentDidUpdate i'm checking prevProps to see if the slug matches the previous slug, if not it fetching the new data.
This works great and I was hoping to do the same in the Blog.js as well.
However, if this isn't the best approach please advise another method.
Two things:
Use element: This will allow only one route to be used, no composing. (See this documentation)
Check the order of path statements: Use defined paths before :param, this avoids considering /blog/:slug as a /:slug parameter.
`
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
class App extends React.Component {
render() {
return (
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog/:slug" component={Blog} />
<Route path="/:slug" component={Page} />
</Switch>
<Footer/>
</div>
</Router>
);
}
}
I think you're pretty close to the recommended implementation, just a few small tweaks should get you there.
First,
In your App.js file you're actually handling routing, without using the <Switch> component provided by React Router, replacing the <div> and </div> tags in your App.js file with <Switch> and </Switch> respectively should get this working for you. See below...
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; //make sure you import it also!
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends React.Component {
render() {
return (
<Router>
<Switch> //Add this in
<Header />
<Route exact path="/" component={Home} />
<Route path="/blog/:slug" component={Blog} />
<Route path="/:slug" component={Page} />
<Footer />
</Switch> //Add this in
</Router>
);
}
}
export default App;
I would recommend going further though!
To make these components more understandable, you should refactor routing functionality into a routes.js file, and top-level App component logic/structure into the App.js file. See below...
In App.js:
This file is where you should handle your base application structure and logic. For example this file is where you'll import your <Header>, your <Footer>, and where the Route component will render.
import * as React from 'react'
import Header from './../Header/Header.jsx'
import Footer from './../Footer/Footer.jsx'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
// Handle your top-level application state here
}
}
// define your top-level application functions here
render() {
return (
<div>
<Header />
<main>
{this.props.children} //This where the Route components will render
</main>
<Footer />
</div>
)
}
}
export default App
In Routes.js:
This file is where you should import your App component, and then handle the routing statements.
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import App from './components/App'
import Home from './pages/Home'
import Page from './pages/Page'
import Blog from './pages/Blog'
/* construct routes */
export default () => {
return (
<Router>
<App>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/blog/:slug' component={Blog} />
<Route path='/:slug' component={Page} />
</Switch>
</App>
</Router>
)
}
If you structure your application this way, your routing logic and top-level application logic are separate, and in the end your files will be less cluttered as both Route files and top-level App files can get fairly dense.
Hope this helps! Let me know if I can explain anything further.
I have a simple app:
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import './css/hind.css';
import './css/splash.css';
import Feedback from './components/Feedback';
import NotFound from './components/NotFound';
render((
<BrowserRouter>
<div className="add-100 dark-background">
<Route path="/" exact={true} component={Feedback}/>
<Route path="*" component={NotFound}/>
</div>
</BrowserRouter>
), document.getElementById('app'));
And I would expect that at the url / I would see the first component, and at any other url, I would see the second. The NotFound part is displaying how I would expect it too, but at /, I see the first component, then the second component displayed beneath it. NotFound is definitely not in my Feedback file. How do I use the router correctly so I only display the component I want it to?
Wrap your routes with <Switch />.
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './css/hind.css';
import './css/splash.css';
import Feedback from './components/Feedback';
import NotFound from './components/NotFound';
render((
<BrowserRouter>
<div className="add-100 dark-background">
<Switch>
<Route path="/" exact={true} component={Feedback}/>
<Route path="*" component={NotFound}/>
</Switch>
</div>
</BrowserRouter>
), document.getElementById('app'));
What does <Switch /> exactly do?
It renders the first child <Route> or <Redirect> that matches the location.
source
path="*" isn't actually supported in RRv4. Instead, a Route with no path property will always match. Combining the knowledge with the Switch component, you'll get the desired outcome. Switch will only render the first matching Route, so the idea is that if none of your other Routes match, then the last Route in your Switch component will render.
<Switch>
<Route path="/" exact={true} component={Feedback}/>
<Route component={NotFound}/>
</Switch>
Using a similar React-Route from a previous project that worked but this one just gives a white screen, if i make a nav link in the root directory it changes the path but stays white. not sure why the content is not loading in. also have the code on repo: repo with code
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import App from './App';
import Test from './components/test';
import Home from './pages/home_page';
import './index.css';
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home}/>
<Route path='/test' component={Test} />
</Route>
</Router>
), document.getElementById('app'))
App.js
import React, { Component } from 'react';
import './App.css';
export default class App extends Component {
render() {
return (
<div>
{this.props.childen}
</div>
);
}
}
Just adding that the console has no errors and says it was compiled correctly with no warnings. The url does change but the content is not loaded to the page.
I cloned your repo and discovered the issue - it's a typo in App.js
{this.props.childen} -> {this.props.children}
It works now.