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>
)
}
}
Related
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;
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
I am new to React and am trying to learn to use React-Router v5. For some reason, my components will not render through the router. Once in my App.js file, I manually rendered my Login.js from there and when I would press buttons within Login.js, router would not change components but it would change the url. I have looked far and wide and I can't seem to find a fix, I feel like it is something simple I overlooked. Here is my code.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.js'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById('root')
);
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import routes from '../routes.js';
class App extends React.Component {
render() {
return (
<div className="HomeNavBar">
<routes />
</div>
);
}
}
export default App
Routes.js
import React from 'react';
import { Switch, Route, Router, withRouter } from 'react-router-dom';
/**
* Import all page components here
*/
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
/**
* All routes go here.
* Don't forget to import the components above after adding new route.
*/
export default function routes(props) {
return (
<Switch>
<Route path='/Login' component={withRouter(Login)}/>
<Route path='/Register' component={withRouter(Register)}/>
<Route exact path='/' component={withRouter(Login)}/>
</Switch>
);
}
Login.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import { Link, withRouter, Router } from 'react-router-dom'
class Login extends React.Component{
render() {
return (
<div>
<div class = "topnav">
<Link to="/">
<button class="HomeButton" id="b" href="#home">CollectR</button>
</Link>
<Link to="/Register">
<button id="a">SignUp</button>
</Link>
<Link to="/Login">
<button id="a" href="#Login">Login</button>
</Link>
</div>
<div id="logo">CollectR</div>
<div>
<form id="loginform">
<label id="loginregistertext">Email</label>
<input type="text" id="logintextbox" />
<label id="loginregistertext">Password</label>
<input type="Password" id="logintextbox" />
<button id="button">Login </button>
</form>
</div>
</div>
)
}
}
export default withRouter(Login)
You need like this (taken from react-router-dom documentation):
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
I am using bootstrap 4 with reactjs. Using react-bootstrap module, trying to render the Navbar , but somehow , it is not rendering properly.
i am using bootstrap 4 syntax in the code but not sure whether any module/lib is using any bootstrap syntax 3
here is the code (App.js) :
import React, { Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';
import News from './Components/pages/News';
import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</div>
</Router>
);
}
}
export default App;
and the navbar.js :
import React, { Component } from 'react';
import ReactBootstrap, { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';
class CustNavbar extends Component {
render() {
return (
<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">CodeLife</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} componentClass={Link} to="/">
Home
</NavItem>
<NavItem eventKey={2} componentClass={Link} to="/about">
About
</NavItem>
<NavItem eventKey={3} componentClass={Link} to="/news">
News
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default CustNavbar;
what is happening
now the issue, there is no any compilation error , but somehow , Navigation bar is not rendering properly. Not sure whether the issue with version syntax or the implementation itself. please suggest
what is expected
Navigation bar should appear in the homepage before Grid/container
EDIT 1:
I have modified the code as suggested . please below :
App.js
import React, { Fragment, Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import CorporateTraining from './Components/pages/corporateTraining';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';
import News from './Components/pages/News';
import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';
class App extends Component {
render() {
return (
<Fragment>
<Navbar />
<div className="App">
<Router>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</Router>
</div>
</Fragment>
);
}
}
export default App;
Regards,
I'm not really sure as its too unclear. But try moving your navbar on top of router as i assume that className App have styling in them. Let me know
import React, { Fragment, Component } from 'react';
...
return (
<Fragment>
<Navbar />
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</Switch
</Router>
</div>
</Fragment>
)
Don't forget to add Fragment