Why is it only showing a white screen when i try to add a new page on both pages
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
// BEM
<Router>
<div className="App">
<Routes>
<Route path="/check">
<Header />
</Route>
<Route path="/">
<Header />
<Home />
</Route>
</Routes>
</div>
</Router>
);
}
export default App;
Why is it only showing a white screen when i try to add a new page on both pages
Related
App.js
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Home";
import Header from "./Header";
function App() {
return (
<div className="app">
<Router>
<Switch>
<Route path="/checkout">
<h1>Checkout</h1>
</Route>
<Route path="/login">
<h1>Login page</h1>
</Route>
<Route path="/">
<Header/>
<Home/>
<h1>Home page</h1>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Header.js
import React from "react";
import "./Header.css";
import SearchIcon from "#material-ui/icons/Search";
import ShoppingBasketIcon from "#material-ui/icons/ShoppingBasket";
import { Link } from 'react-router-dom';
function Header() {
return (
<div className="header">
<img className="header__logo" src="https://i.pinimg.com/736x/35/ca/74/35ca74aa0f5cbb599b83c02bf48499b5--design-logo-handicraft.jpg"/>
<div className="header__optionBasket">
<ShoppingBasketIcon />
<span className="header__optionLineTwo header__basketCount">
0
</span>
</div>
</div>
</div>
);
}
export default Header;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
I tried to add Header and Home component in App.js and was expecting the stuffs which I added, but it is showing blank on the home page. In contrast, login page shows texts -"login". Where did I go wrong, I have been searching the same but cannot find any answer anywhere. My react router version is 5.2.0
I'm not that familiar with react-router, but It seems you are returning 3 components under 1 Route tag
So maybe put Header, Home and h1 in a div:
<Route>
<div>
<Header />
<Home />
<h1></h1>
</div>
</Route>
I tried to lead from the home page to "/allUsers" page. The homepage has a link that directs to the all Users page. But when I click from the home page to all User page it does not show any content. The link to all Users is "http://localhost:3000/allUsers"
App.js:
import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import Home from './components/Home';
import allUsers from './pages/allUsers/allUsers';
import airportEmployee from './pages/AirportEmployee/airportEmployee';
import airlineEmployee from './pages/AirlineEmployee/airlineEmployee';
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allUsers" element={<allUsers />} />
<Route path="/airline-employee" element={<airlineEmployee />} />
<Route path="/airport-employee" element={<airportEmployee />} />
</Routes>
</div>
);
}
export default App;
Here is the Home.js file
const Home = () => {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link
underline="hover"
color="inherit"
href="/allUsers"
fontSize="large"
>
All Users
</Link>
<Link
underline="hover"
color="inherit"
href="/airport-employee"
fontSize="large"
>
Airport Employee
</Link>
<Link
underline="hover"
color="inherit"
href="/airline-employee"
fontSize="large"
>
Airline Employee
</Link>
</Breadcrumbs>
);
};
export default Home;
Change this in app.js:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allUsers" element={<allUsers />} />
<Route path="/airline-employee" element={<airlineEmployee />} />
<Route path="/airport-employee" element={<airportEmployee />} />
</Routes>
</Router>
</div>
);
}
Change in Home.js:
import App from "components/App";
import {Link} from "react-router-dom";
<Link to="/allUsers">All Users</Link>
I think route has a 'exact' keyword to match exactly the url you want.
<Route path="/allUsers" exact element={<allUsers/>} />
I would like, when clicking on a NavLink, to update the router page instead of just changing it, my pages contain external JS plugins that are not loaded just by changing the page, it is necessary to reload.
My code:
import React from "react";
import Home from './components/pages/Home';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Teste from './components/pages/Teste';
import Footer from './components/Footer';
import { Fragment } from "react";
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
export default function App() {
return (
<div>
<Fragment>
<div className="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<Header />
<div className="app-main">
<Router>
<Sidebar />
<div className="app-main__outer">
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/page/teste">
<Teste />
</Route>
</Switch>
<Footer />
</div>
</Router>
</div>
</div>
</Fragment>
</div>
);
}
The NavLinks is in the SideBar component, so it is not seen there, my "Home" page contains a JS plugin that when coming from the "Test" page, it is not loaded, only when I refresh the entire page. Thanks.
You can force page reloads with the forceRefresh prop on the BrowserRouter.
forceRefresh
If true the router will use full page refreshes on page navigation.
You may want to use this to imitate the way a traditional
server-rendered app would work with full page refreshes between page
navigation.
<Router forceRefresh>
<Sidebar />
<div className="app-main__outer">
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/page/teste">
<Teste />
</Route>
</Switch>
<Footer />
</div>
</Router>
If/when you ever upgrade to react-router-dom#6 this is accomplished similarly via the Link|NavLink component's reloadDocument prop.
RRDv6 Link
interface LinkProps
extends Omit<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
"href"
> {
replace?: boolean;
state?: any;
to: To;
reloadDocument?: boolean; // <--
}
You can refresh the BrowserRouter by using forceRefresh property of BrowserRouter:
<Router forceRefresh>
<Sidebar />
<div className="app-main__outer">
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/page/teste">
<Teste />
</Route>
</Switch>
<Footer />
</div>
</Router>
Here is the code:
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
{/* <Route path="/vanillajs" element={SpotifyClone} />
<Route path="/djangoapi" element={InstagramClone} /> */}
<Route path="/reactjs" element={<TrelloClone />} />
</Routes>
</BrowserRouter>
<Intro />
<Services />
<Experience />
</div>
);
}
export default App;
So basically I need to hide(or remove) <Intro />, <Services /> and <Experience /> by clicking the link that leads to '/reactjs' path but leave the <Navbar /> on the page.
edit: grammar and clarifications
install this history from this link, when your package is installed successfully, create a file history.js and put the below code in this file.
import {createBrowserHistory} from 'history';
export default createBrowserHistory();
import the history file in this file like import history from './history', then you will get the history props and you can console the history props and check which props are coming and you will find pathname in the history props and make a condition and as you can see in the code below.
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import history from './history'
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
{/* <Route path="/vanillajs" element={SpotifyClone} />
<Route path="/djangoapi" element={InstagramClone} /> */}
<Route path="/reactjs" element={<TrelloClone />} />
</Routes>
</BrowserRouter>
{history?.location?.pathname !== '/reactjs' &&
<>
<Intro />
<Services />
<Experience />
</>
}
</div>
);
}
export default App;
I'm trying to make a login page that would work as entry page for my app, and after user would input login and password, it would open main component with menu and content of the pages.
the problem that I can'r understand how to setup a router, or main app structure so it would work as I want. So far I can display a login component with main menu bar at the same time, or just a login page without working pages.
there is my router
import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
import App from './App'
import LoginPage from './pages/login'
import Forms from './pages/Forms'
import Home from './pages/Home'
ReactDOM.render(
<Router history={hashHistory}>
<Route path ="/" component={App}>
<IndexRoute component={LoginPage} />
<Route exact path='/LoginPage' component={LoginPage} />
<Route exact path='/App' component={App} />
<Route exact path='/Home' component={Home} />
<Route exact path='/Forms' component={Forms} />
</Route>
</Router>, document.getElementById('root'))
my login page
import React, { Component } from 'react'
import { Link } from "react-router"
import logo from './logo.jpg';
export default class LoginPage extends Component {
render() {
return (
<div className="login-page">
<div className="login-form-cont">
<div style={{paddingBottom:'10px'}}> <img src={logo} width="270" height="54" /> </div>
<form className="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<Link to={`/Home`}>
<button> login </button>
</Link>
</form>
</div>
</div>
)
}
}
and my app.js
import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import classnames from 'classnames'
import SideBarMenu from './components/SidebarMenu'
export default class App extends Component {
constructor(props){
super(props)
this.state = {open: false}
}
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div >
<SideBarMenu/>
<div className={classnames('app-content')}>
{ this.props.children }
</div>
</div>
</MuiThemeProvider>
)
}
}
I tried to make router to start from login component but in this case even address is changing in a browser window, there was no changes on the screen itself
I'm using react router 3.2 and react 15.6
first of all i will recommend you use react-router v4 cos that what i will be showing you. and v4 is beta than the older versions.
import { BrowserRouter, Switch, Route } from 'react-router-dom';
export default class App extends Component{
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/Home" component={Home}/>
<Route exact path="/Dashboard" component={Dashboard} />
<Route exact path="/Dashboard/:userId" component={Dashboard}/>
<Route component={NotFound}/>
</Switch>
</BrowserRouter>
)
}
}