React url change but components not rendered until manual refresh - javascript

Hi im new to react and the routers. The problem is when I click on a link the URL at the top changes so I can tell that something is happening. But the page does not refresh automatically and so the new components arent rendered hen I click on it. If I manually refresh the page in chrome it will then render the correct components for the link. Not sure why this is happening.
Also I'm not sure if this has any affect on it but I do have a back end node js server and MongoDB data base this isn't just a front end react page. Im not sure if that has any affect? the functions of the nodejs server and Mongodb work it just doesn't refresh. Im not sure if that is relevant.
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault , setDefault] = useState(String);
return (
<div className="App">
<h1>react app</h1>
<Navbar/>
<BrowserRouter>
<div className="App">
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
/*
<div className='row'>
<div className='col-md-6'>
<Register/>
</div>
<div className='col-md-6'>
<Login/>
</div>
</div>
<div className ='row justify-content-center' >
<div className='col-md-8 '>
<Notes/>
</div>
</div>
*/
export default App;
import React, {useState} from 'react';
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
function Navbar() {
return (<div>
<p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
<div className ='navbarOptions' style={{backgroundColor:'black'}}>
<BrowserRouter>
<ul>
<Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>
<li >
Register
</li>
</Link>
<Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>
<li>
Login
</li>
</Link>
<Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>
<li >
Notes
</li>
</Link>
</ul>
</BrowserRouter>
</div>
</div>
);
}
export default Navbar ;
Here it shows login in the URL but is still rendering notes when I refresh the page it will show notes

You don't need to use browserrouter in the navlink, only use in router and also put the BrowserRouter before the switch
Like this:-
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault, setDefault] = useState('');
return (
<div className="App">
<h1>react app</h1>
<Navbar/>
<div className="App">
<BrowserRouter>
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</BrowserRouter>
</div>
</div>
);
}
export default App;

Remove BrowserRouter in your navbar component. I think that should work, normally we have to use BrowserRouter once.

BrowserRouter should wrap all route things, that means that you should put the links within the Browser Router
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault, setDefault] = useState('');
return (
<div className="App">
<h1>react app</h1>
<BrowserRouter>
<Navbar/>
<div className="App">
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
export default App;
import React, {useState} from 'react';
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
function Navbar() {
return (
<div>
<p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
<div className ='navbarOptions' style={{backgroundColor:'black'}}>
<ul>
<Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>Register</Link>
<Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>Login</Link>
<Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>Notes</Link>
</ul>
</div>
</div>
);
}
export default Navbar ;

Related

utils.ts:757 Uncaught Error: [div] is not a <Route> component

I try to make a route of Register and Login components inside a div(className='container') in react-router v6, but when i try to access these components I reach a blank page, then when i rid the div class it works very well, i don't know if the problem from the div. please help me to fix it:
this is my code:
enter code here
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<div className="container">
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</div>
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Register extends Component {
render() {
return (
<div >
<h1>Register</h1>
</div>
)
}
}
export default Register;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
</div>
)
}
}
export default Login;
import React, { Component } from 'react';
import { Link, Outlet } from "react-router-dom";
class Landing extends Component {
render() {
return (
<div className="landing">
<div className="dark-overlay landing-inner text-light">
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<h1 className="display-3 mb-4">Developer Connector
</h1>
<p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
<hr />
<Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
<Link to="/login" className="btn btn-lg btn-light">Login</Link>
</div>
</div>
</div>
</div>
</div>
)
}
};
export default Landing;
When you try to put a DIV object as a route, the problem occurs.
I suggest you remove the DIV from the APP component and put it inside each page (register, login) as needed.
Wish you the best!
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
Don't use div inside Routes. Use Route with some custom components.

React page not refreshing automatically when using Router

I've been working on my first React project and used react-router to navigate to different pages. Although I have reached the functionality, I have found that I have to manually refresh the page (using F5) whenever I press the link (for eg. About or Shop in the following code) to load the content.
Here's my Code
App.js
import React from "react";
import Nav from "./Nav";
import Shop from "./Shop";
import About from "./About";
import Home from "./Home";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "../App.css";
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Nav.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import "../App.css";
function Nav() {
return (
<nav>
<h3>Adifier</h3>
<ul className="nav-links">
<Router>
<Link to="/about">
<li>About</li>
</Link>
<Link to="/shop">
<li>Shop</li>
</Link>
</Router>
</ul>
</nav>
);
}
export default Nav;
About.js
import React from "react";
function About() {
return (
<div className="App">
<h1>About Page</h1>
</div>
);
}
export default About;
Shop.js
import React from "react";
function Shop() {
return (
<div className="App">
<h1>Shop Page</h1>
</div>
);
}
export default Shop;
Thanks in advance
Remove Router from Nav.js. It has already served its purpose when you defined routes in app.js
<ul className="nav-links">
<Link to="/about">
<li>About</li>
</Link>
<Link to="/shop">
<li>Shop</li>
</Link>
</ul>

Why React routing not working in component?

I'm working on a React web application using React router.
In my App.js file i have imported header and home component.
In home component i have 2 components called Onlinebanks and Creditcard that i imported from online-banks.js and creditcard.js files.
When the user clicks link buttons in home.js component, the Onlinebanks and Creditcard components should render.
Instead i am getting an error called Error: Invariant failed: You should not use < Link> outside a < Router>.
Why it's not working?
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
APP.JS
import React, { Component } from 'react';
import './App.css';
import Header from './components/header';
import Home from './components/home';
class Routes extends Component {
constructor(props){
super(props);
this.state = {
};
}
render(){
return (
<div className="wrapper">
<Header/>
<Home/>
</div>
);
}
}
export default Routes;
HOME.JS
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Onlinebanks from './online-banks';
import Creditcard from './creditcard';
const Home = (props) => {
return (
<div className="section">
<div className="main-page">
<div className="tab-container">
<div className="tab-btns">
<Link to="/">
<div className="online-bank-btn">
Online pangad
</div>
</Link>
<Link to="/creditcard">
<div className="creditcard-btn">
Krediitkaart
</div>
</Link>
</div>
<Switch>
<Route path="/" exact component={Onlinebanks}/>
<Route path="/creditcard" exact component={Creditcard}/>
</Switch>
</div>
</div>
</div>
)
}
export default Home;
ONLINE-BANKS.JS
import React from 'react';
const Onlinebanks = (props) => {
return (
<div className="banks-container">
<input type="button" value="Pay" className="pay-btn" id="online-banks-pay"></input>
</div>
)
}
export default Onlinebanks;
CREDITCARD.JS
import React from 'react';
const Creditcard = (props) => {
return (
<div className="Creditcard-container">
<input type="button" value="Pay" className="pay-btn" id="creditcard-pay"></input>
</div>
)
}
export default Creditcard;
I don't see anywhere in your code where you imported BrowserRouter from react-router-dom which should wrap all the other components rendered by your top level componet (app.js) or entirely wrap the app component. so, first import { BrowserRouter as Router } from "react-router-dom" in index.js, then wrap App component with Router as follows
ReactDOM.render(<Router> <App /> </Router>, document.getElementById("root"));
alternatively you can wrap the retun statment in app.js with Router as follows after importing BrowserRouter as Router
return (
<Router>
<div className="wrapper">
<Header/>
<Home/>
</div>
</Router>
);
<Router> is an HOC component, so you need to use it at the top most level possible. Suggestion would be to create a separate Router component and use it within App.js file above div tag
<CustomRouter>
<div className="wrapper">
<Header/>
<Home/>
</div>
</CustomRouter>
you need to better understand how react-router-dom works.
visit here for complete routing guide react-router-dom
i found some major missings in your app.js file.
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
i don't see this method in your app.js .

Why isn't my navigation bar rendering in React?

This is the code I have, I believe I have imported everything correctly, I am using React mdl to style it and copied and pasted the navbar code.
I also installed react dom router correctly, the individual pages display but the navbar itself doesn't on the landing page.
Can anyone help me? Thanks
App.js
import React, { Component } from "react";
import "./App.css";
import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
import Earth from "./earth.jpg";
import Main from "./components/main";
import { Link } from "react-router-dom";
class App extends Component {
render() {
return (
<div style={{ height: "300px", position: "relative" }}>
<Layout style={{ background: "src{Earth} center / cover" }}>
<Header transparent title="Title" style={{ color: "white" }}>
<Navigation>
Link
Link
Link
Link
</Navigation>
</Header>
<Drawer title="Title">
<Navigation>
<Link to="/aboutme">About Us</Link>
<Link to="/projects">Projects</Link>
<Link to="/resume">Resume</Link>
<Link to="/contact">Contact</Link>
</Navigation>
</Drawer>
<Content>
<div className="page-content">
<Main />
</div>
</Content>
</Layout>
</div>
);
}
}
export default App;
main.js
import React from 'react';
import { Switch, Route} from 'react-router-dom';
import LandingPage from './landingpage';
import AboutMe from './aboutme';
import Contact from './contact';
import Projects from './projects';
import Resume from './resume';
const Main = () => (
<Switch>
<Route exact path="/" component = {LandingPage} />
<Route path="/aboutme" component = {AboutMe} />
<Route path="/contact" component = {Contact} />
<Route path="/projects" component = {Projects} />
<Route path="/resume" component = {Resume} />
</Switch>
)
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
serviceWorker.unregister();
You need to wrap your App component with BrowserRouter from react-router-dom.
You can do this inside you App component, or better in index.js like this:
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, rootElement);
Codesandbox:
https://codesandbox.io/s/so-react-router-uc8dr

ReactJS App Does not return the correct page

So I am new to ReactJS and is trying to figure it things how to have an app with a different header for the login page and then another header once the user was logged in.
I only want to have the very first page to have the LoginHeader and then the PostHeader as the main header once they get authenticated.
However, when I am on the my login page, whenever I click the sign in button I automatically get taken to my PostHeader page even though I routed my correct link. Everything in the PostHeader works fine, like when I click Home and Create they return the pages they are supposed.
My code is down below
index.js
import React from 'react';
import createHistory from 'history/createBrowserHistory';
import ReactDOM from 'react-dom';
import { Route, Switch, Router } from 'react-router-dom';
import Header from "./_components/header/header";
ReactDOM.render(
<Router history={createHistory()}>
<div>
<Header />
</div>
</Router>,
document.getElementById('root'),
);
Header.js
import React, {Component} from 'react';
import {Link,Route,withRouter, Switch, } from 'react-router-dom';
import PostHeader from './PostHeader';
import LoginHeader from './LoginHeader';
class Header extends Component{
render(){
if (window.location.pathname === '/') {
return(
<LoginHeader />
);
};
return(
<PostHeader />
);
}
}
export default Header;
LoginHeader.js
import React, {Component} from 'react';
import {Link,Route,withRouter, Switch} from 'react-router-dom';
import SignIn from '../signin/signin';
import TopProjects from '../create_projects/top_projects';
class LoginHeader extends Component{
render(){
return(
<div className="container">
<div>
<h3>The Web App</h3>
<nav>
<ul>
<li><Link to="/sign-in">Sign In?</Link></li>
<li><Link to="/top-projects">Top Projects</Link></li>
</ul>
</nav>
<hr />
</div>
<Switch>
<Route exact path="/sign-in" component={SignIn}/>
<Route path="/top-projects" component={TopProjects} />
</Switch>
</div>
);
}
}
export default LoginHeader;
PostHeader.js
import React, {Component} from 'react';
import {Link,Route} from 'react-router-dom';
import Home from '../home/home';
import CreateProjects from '../create_projects/create_projects';
class PostHeader extends Component{
render(){
return(
<div className="container">
<div>
<h3>The Web App</h3>
<nav>
<ul>
<li><Link to="/home">Home</Link></li>
<li><Link to="/create-projects">Create</Link></li>
</ul>
</nav>
<hr />
</div>
<Route path="/home" component={Home}/>
<Route path="/create-projects" component={CreateProjects} />
</div>
);
}
}
export default PostHeader;
I just want to have different headers for some pages.
That's because in your Header.js, you are only rendering the LoginHeader if you are in the root route.
if (window.location.pathname === '/') {
return(
<LoginHeader />
);
};
So when you click the sign in button, it redirects you to /sign-in, thus when Header is re-rendered, the condition will fall on the else statement which returns the PostHeader.

Categories