React Refuses to render a div - javascript

I am working on a web application and my application works for the most part except I cannot see the /tasks section. I do not understand because it is the same as the rest of my elements.
import React, {
Component,
Fragment
} from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import AppProvider, {
Consumer
} from './AppProvider';
import Login from './Login';
import Signup from './Signup';
import Navbar from './Navbar';
import FlashMessage from './FlashMessage';
class App extends Component {
render() {
return (
<AppProvider>
<Router>
<Fragment>
<Navbar />
<FlashMessage />
<Route exact path="/" component={() =>
<h1 className="content">Welcome, Home!</h1>} />
<Route exact path="/login" component={() => <Login />} />
<Route exact path="/signup" component={() => <Signup />} />
<Router exact path="/tasks" component={() =>
<h1 className="content">Content Should Go Here</h1>} />
<Route exact path="/signedOut" component={() =>
<h1 className="content">You're now signed out.</h1>} />
<Route exact path="/accountCreated" component={() =>
<h1 className="content">Account created. <Link
to="/login">
Proceed to Dashboard</Link></h1>} />
</Fragment>
</Router>
</AppProvider>
);
}
}
export default App;
The content div routed at /tasks won't display anything. There are no errors, I have checked in the console. All I want is it to display the content on /tasks.

I think the problem is you are using the BrowserRouter in your "./tasks" instead of use route.

The issue is because you have a trailing Slash on your link.

Related

Blank Page after using Route in React

This is my App.js
import "./App.css";
import Header from "./component/layout/Header/Header.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React from "react";
import Home from "./component/Home/Home.js";
function App() {
return (
<Router>
<Header />
<Route exact path="/" component={Home} />
<Footer />
</Router>
);
}
export default App;
This is my Home.js
const Home = () => {
return (
<Fragment>
<div className="banner">
<p>Welcome to My Website</p>
</div>
</Fragment>
);
};
export default Home;
Edit: i managed to remove the black page after wrapping the Route but the text in Home.js doesn't show "Welcome to My Website"
<Routes>
<Route exact path="/" component={Home} />
</Routes>
this code ^ removed the blank page but the result is that the text from Home.js "Welcome to My Website" didn't show. How can I route correctly to the Home component?
If you are using v6 react-router-dom, you have to replace component to element
<Routes>
{/* <Route exact path="/" component={Home} /> */}
<Route exact path="/" element={<Home />} />
</Routes>

Nothing appears while using react router

I have a problem with react Router.
So i am building the nav of an website and when i'm doing the routes, nothing appears.
Would you help me please to see what i'm doing wrong?
The page stays white. Nothing appears, even the root doesnt see the homepage.
........................................................................................
Homepage:
import React from 'react';
import Navbar from '../allpages/navbar/Navbar';
import {
BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import Contact from "../contact/Contact";
import About from "../about/About";
const Home = () => {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path="/about" element={About} />
<Route path="/contact" element={Contact} />
<Route exact path="/" element={Home} />
</Routes>
</Router>
<h3>Home</h3>
</>
)
}
export default Home
Navbar:
import React from 'react';
import {
BrowserRouter as Link
} from "react-router-dom";
const Navbar = () => {
return (
<div>
<nav>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Navbar
main app:
import './App.css';
import Home from './components/home/Home'
function App() {
return (
<>
<Home />
</>
);
}
export default App;
contact:
import React from 'react';
const Contact = () => {
return (
<div>
<h3>Contact</h3>
</div>
)
}
export default Contact
About:
import React from 'react';
const About = () => {
return (
<div>
<h1>About</h1>
</div>
)
}
export default About
So besides this typo:
{ BrowserRouter as Link } // use just Link
which is inside Navbar.js
I would also use recommended approach by React-Router team. Which uses <Switch> component to wrap pages. You are using Routes instead, idk if this is even valid.
You can check this example: https://v5.reactrouter.com/web/example/basic
which is really similar to your code.
What versión is you using? You might be out of dated
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/*" element={<Outlet />}>
<Route path="informacion-financiera" element={<Financiera />} />
<Route path="derechos-de-autor" element={<Author />} />
<Route
</Route>
</Routes>
</React.Suspense>
```
What versión is you using? You might be out of dated
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/*" element={<Outlet />}>
<Route path="informacion-financiera" element={<Financiera />} />
<Route path="derechos-de-autor" element={<Author />} />
<Route
</Route>
</Routes>
</React.Suspense>
```
You have browserRouter as Link so yow links are not links

Simple authorization check causes redux store Provider to crash

I have an application built in React and Redux that's been working fine until I implemented a simple localStorage check to render either the App or an auth page I've called Gateway:
App.js
import React, { useState } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./redux/store";
import NavBar from "./components/NavBar";
import Settings from "./views/Settings";
import Gateway from "./views/Gateway";
import Profile from "./views/Profile";
import Signup from "./views/Signup";
import NewTestimonialPage from "./views/NewTestimonialPage";
import NotFoundPage from "./views/NotFoundPage";
import "./styles/App.scss";
function App() {
// new additions start here...
const [loggedIn, setLoggedIn] = useState(
localStorage.getItem("loggedIn") === "true"
);
if (!loggedIn) {
return <Gateway />;
}
...and end here
return (
<Router>
<Provider store={store}>
<NavBar />
<div className="navbar-dodger"></div>
<div className="App">
<Switch>
<Route exact path="/" component={Gateway} />
<Route path="/signup" component={Signup} />
<Route path="/settings/:userId" component={Settings} />
<Route path="/profile/:userId" component={Profile} />
<Route
path="/new-testimonial/:userId"
component={NewTestimonialPage}
/>
<Route path="/404" component={NotFoundPage} />
<Route component={NotFoundPage} />
</Switch>
</div>
</Provider>
</Router>
);
}
export default App;
Without the code between comments, everything was 100% fine.
Now, I throw this error:
Could not find "store" in the context of "Connect(EmailCheck)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(EmailCheck) in connect options.
If I render the provider inside that if-block as well, it works. Why? Why do I need a store if I'm not using redux in any way inside Gateway?
If you are using redux inside <Gateway> component then your component must be wrapped in <Provider>
It should look like :
return (
<Router>
<Provider store={store}>
{!loggedIn ?? <Gateway /> : <YourApplication />}
</Provider>
</Router>
);
Create a component for the app like
YourApplication.js:
return (
<>
<NavBar />
<div className="navbar-dodger"></div>
<div className="App">
<Switch>
<Route exact path="/" component={Gateway} />
<Route path="/signup" component={Signup} />
<Route path="/settings/:userId" component={Settings} />
<Route path="/profile/:userId" component={Profile} />
<Route
path="/new-testimonial/:userId"
component={NewTestimonialPage}
/>
<Route path="/404" component={NotFoundPage} />
<Route component={NotFoundPage} />
</Switch>
</div>
<>
);

HashRouter and Google Analytics trouble tracking individual paths

I have already tried various solutions, I am currently using it, unfortunately GA only tracks one path ('/')
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../sass/main.scss';
import {
HashRouter,
Route,
Switch,
} from 'react-router-dom';
const history = createHistory()
ReactGA.initialize('UA-XXXXXXX-1');
history.listen((location, action) => {
ReactGA.pageview(location.pathname + location.search);
console.log(location.pathname)
});
class Index extends Component {
render() {
return (
<>
<HashRouter history={history} >
<Route />
<ScrollUpButton ContainerClassName="AnyClassForContainer" />
<Header />
<Switch history={history}>
<Route exact path={"/"} component={() => <HomePage />}/>
<Route exact path={"/test"} component={() => <CategoryLinksNextPrev />}/>
<Route exact path={"/contact"} component={() => <Contact />}/>
<Route exact path={"/car/:category/"} component={CarCategory} />
<Route exact path={"/car/:category/:carname"} component={CarOnePageMain} />
<Route path="*" component={NotFound} />
</Switch>
<Footer />
</HashRouter>
</>
)
}
}
ReactDOM.render(<Index />, document.getElementById("index"));
In google analytics it only shows me one subpage, and exactly points to index.html
UPDATE
I found a very simple solution to this problem.
https://www.npmjs.com/package/react-router-ga
So that's my code now:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../sass/main.scss';
import {
HashRouter,
Route,
Switch,
} from 'react-router-dom';
import Analytics from 'react-router-ga';
class Index extends Component {
render() {
return (
<>
<HashRouter >
<Analytics id="UA-xxxxxxx-1" debug>
<ScrollUpButton ContainerClassName="AnyClassForContainer" />
<Header />
<Switch history={history}>
<Route exact path={"/"} component={() => <HomePage />}/>
<Route exact path={"/test"} component={() => <CategoryLinksNextPrev />}/>
<Route exact path={"/contact"} component={() => <Contact />}/>
<Route exact path={"/car/:category/"} component={CarCategory} />
<Route exact path={"/car/:category/:carname"} component={CarOnePageMain} />
<Route path="*" component={NotFound} />
</Switch>
<Footer />
</Analytics>
</HashRouter>
</>
)
}
}
ReactDOM.render(<Index />, document.getElementById("index"));
I had a similar issue recently.
It looks like Google Analytics loads on the page load. If you click on a link, GA will run again as the new page is loaded from scratch with a new URL.
You have to manually fire the GA page views when user moves around your single page application.
More info here - https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

404 page in REACT

I created the component NotFound and it works fine when I go to a page that doesn't exist. But the same page it's appearing in all my pages, not only the one that doesn't exist. This is the component:
import React from 'react'
const NotFound = () =>
<div>
<h3>404 page not found</h3>
<p>We are sorry but the page you are looking for does not exist.</p>
</div>
export default NotFound
And this is how I used it in the main page:
class MainSite extends Component {
render () {
return (
<div>
{/* Render nav */}
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
{/* Dashboard page */}
<ProtectedRoute exact path='/dashboard' component={DashboardPage} />
{/* Retrospectives page */}
<ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />
{/* Users page */}
<ProtectedRoute exact path='/users' component={UsersPage} />
{/* Projects page */}
<ProtectedRoute exact path='/projects' component={ProjectsPage} />
{/* Retrospective related pages */}
<Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
<Route exact path='/join-retrospective' component={JoinRetrospective} />
<ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />
{/* OnBoarding pages */}
<ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
<Route exact path='/auth-handler' component={AuthHandler} />
<Route exact path='/join-organization' component={JoinOrganization} />
</div>
)
}
}
export default MainSite
As you can see I use <Route path="*" component={NotFound} /> to create the 404 pages, but that component is appearing in every existing page as well. How can I fix this?
Try this one:
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
<Route path="" component={NotFound} />
</Switch>
All below example works fine:
<Route path="" component={NotFound} /> // empty ""
<Route path="*" component={NotFound} /> // star *
<Route component={NotFound} /> // without path
Or if you want to return a simple 404 message without any component:
<Route component={() => (<div>404 Not found </div>)} />
For those who are looking for an answer using react-router-dom v6, many things had changed. Switch for example doesn't exists anymore, you have to use element instead of component, ... Check this little example to get you an idea:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './index.css'
import App from './App'
const Test = () => (
<h1>404</h1>
)
ReactDOM.render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/' element={<App />} />
<Route path='*' element={<Test />}/>
</Routes>
</Router>
</React.StrictMode>,
document.getElementById('root')
)
With this you are defining your home route and all the other routes will show 404. Check the official guide for more info.
Try This:
import React from "react";
import { Redirect, Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
class App extends React.Component {
render(){
return(
<BrowserRouter>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path="*" component={NotFoundPage} />
</Switch>
</BrowserRouter>
)
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Simply import Switch from react-router-dom and wrap all your Routes in the Switch Component. Also Important here is to note to keep your 404Page component at the very bottom(just before your switch ending tag) This way it will match each component with its route first. If it matches, it will render the component or else check the next one. Ultimately if none matching routes will be founded, it will render 404Page
react router is a headache for new coders. Use this code format. This is class component but you can make a functional component and use it.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
import Footer from './Footer';
class App extends React.Component {
render(){
return(
<Router>
<Routes>
<Route exact path='/' element={HomePage} />
<Route path="*" element={NotFoundPage} />
</Routes>
<Routes>
<Route path="/" element={Footer}/>
</Routes>
</Router>
)
}
}
export default App;

Categories