blank page with <Link> - javascript

I get a blank page when I use Link.
I should see Events, date, accueil
I use the last version of react-router.
I don't know if I have to delete to?
This is my code:
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
// import Header from './components/Header';
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<BrowserRouter>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Thank you!

It seems likely that it is causing an error because Link must be a descendant of the Router (BrowserRouter) component.
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</div>
</BrowserRouter>
);
}

Related

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>

React url change but components not rendered until manual refresh

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 ;

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.

React components not appearing

I have a repo at https://bitbucket.org/codyc54321/anthony-project-react
I have the homepage showing links, and when you click the links react-router works. But the text of the component is not showing up, like <div>Login page</div>, <div>Homepage</div>, etc.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import Nav from './Nav';
import Home from './components/Home';
import Login from './components/Login';
import SignupMain from './components/SignupMain';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path="/" component={Nav}>
<IndexRoute component={Home}/>
<Route path='/login' component={Login}/>
<Route path='/signup-main' component={SignupMain}/>
</Route>
</Router>
</Provider>
), document.querySelector('.container'));
Nav.js:
import React from 'react';
import { Link } from 'react-router';
export default class Nav extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header navbar-brand">
Home
</div>
</div>
<div id="navbar" className="navbar-right">
<ul className="nav navbar-nav">
<li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li>
<li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li>
<li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li>
</ul>
</div>
</nav>
</div>
)
}
}
// export Nav as default;
components/Home.js:
import React, { Component } from 'react';
export default class Home extends Component {
render() {
return (
<div>Homepage</div>
);
}
}
Why aren't these components showing up on the page?
Since your other routes are nested inside the route for 'Nav' component, it should render its children somewhere. For that, you have to put this.props.children where you want to render nested components in JSX of Nav component.
export default class Nav extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header navbar-brand">
Home
</div>
</div>
<div id="navbar" className="navbar-right">
<ul className="nav navbar-nav">
<li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li>
<li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li>
<li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li>
</ul>
</div>
</nav>
<div>{this.props.children}</div>
</div>
)
}
}

React Capital case in routes

I'm working on a very simple react app, but when I try to use router in always makes pathname with first letter Capital case and I don't have any idea why.
app.js
import React from "react";
import ReactDOM from "react-dom";
import Layout from "./pages/Layout"
import Basket from "./pages/Basket"
import { Router, Route, IndexRoute, hashHistory } from "react-router"
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={ItemsList}></IndexRoute>
<Route path="basket" name="basket" component={Basket}></Route>
</Route>
</Router>,
app);
Header.js
import React from "react";
import { Link } from "react-router"
export default class Header extends React.Component {
render() {
const { location } = this.props;
const basketClass = location.pathname.match(/^\/basket/) ? "active" : "";
return (
<header>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class={inventoryListClass}><Link to="/">Inventory</Link></li>
<li class={basketClass}><Link to="basket">Basket</Link></li>
</ul>
</div>
</nav>
</header>
);
}
}
does anyone now why it uses capital letter "/Basket" when I explicitly specified "basket" in route parameter.
thanks.
Layout.js
import React from "react";
import Footer from "./Footer";
import Header from "./Header";
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div>
<Header location={location} />
<div class="container">
{this.props.children}
</div>
<Footer />
</div>
);
}
}
Ok so I found the problem. I put capital capital "B" in <link to=Basketthis line in my header.js
<li class={basketClass}><Link to="Basket">Basket</Link></li>
So it was just a type. Sorry guys.
You don't have to check for active routes, by the way, there is activeClassName="active" which does the same.

Categories