I am very new in web development and I am creating a personal website. I have three main tabs, HOME, ABOUT ME and CONTACT ME.
I've created a Footer as a component but it is rendering in all these three pages and I would like to keep my HOME page without a Footer.
Below some of my Code.
App.js
import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';
import ...
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'Lenin Cruz',
headerLinks: [
{ title: 'Home', path: '/home' },
{ title: 'About', path: '/about' },
{ title: 'Contact', path: '/contact' }
],
home: {
title: 'HELLO I\'M Zoro!',
subTitle: 'I\'m a Engineering Student\n',
text: 'Checkout my projects below',
logo: logoo
},
about: {
title: 'About Me',
},
contact: {
title: 'Get in touch'
},
}
}
render() {
return(
<Router>
<Container>
<Navbar >
<Navbar.Brand>
<img
src= {this.state.home.logo}
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-toggle"/>
<Navbar.Collapse id="navbar-toggle">
<Nav>
<Link className="nav-link" to ="/home"><Badge variant="secondary">Home</Badge></Link>
<Link className="nav-link" to ="/about"><Badge variant="secondary">About</Badge></Link>
<Link className="nav-link" to ="/contact"><Badge variant="secondary">Contact</Badge></Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Route path="/home" exact render ={() => <HomePage title= {this.state.home.title}
subTitle={this.state.home.subTitle}
text={this.state.home.text} />} />
<Route path="/about" exact render ={() => <AboutPage title= {this.state.about.title}
photo= {this.state.about.photo} />} />
<Route path="/contact" exact render ={() => <ContactPage title= {this.state.contact.title} />} />
{/* {this.props.location.pathname !== '/home' && <Footer/>} */}
<Footer className="g-Footer"/>
</Container>
</Router>
);
}
}
As you guys see, I was trying some conditional rendering for my footer in the render function but it seems not to work as it it not recognizing 'location.pathname'
{/* {this.props.location.pathname !== '/home' && <Footer/>} */}
Here is my HomePage.js with a component HERO which is just styling the content
import React from 'react';
import Hero from '../components/Hero';
function HomePage(props) {
return(
<div>
<Hero title={props.title} subTitle= {props.subTitle} text= {props.text}/>
</div>
);
}
export default HomePage;
and here ir my Footer.js component
import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return(
<footer >
<Container >
<Col >
<Row>
Let's talk
</Row>
</Col>
</Container>
</footer>
);
}
export default Footer;
Any suggestions about why this.props.location.pathname doesn't work or any help with other method is much appreciated
Thanks :)
In your App class replace:
<Footer className="g-Footer" />
with
<Route
path={new RegExp('^(?!.*(\/home)).*$')}
exact
render={() => <Footer className="g-Footer" />}
/>
I have not tested if this works though
Use window.location.href instead.
Related
When a user click on login button it will go to Login page
Like this
I am creating this website for my portfolio But i am facing an error here is my Login and loginwtihgoogle component
Login component
import React from 'react'
const Login = () => {
return (
<>
<div className='login-icon hover:text-yellow-800'>
<a href='Loginwithgoogle'>
<img src="/src/assets/login.png" alt="login icon" className='mt-2 ml-14 h-8 '/>
<figcaption className='text-white text-center ml-14 text-[9px] hover:text-yellow-800'>LOGIN</figcaption>
</a>
</div>
</>
)
}
export default Login
Here is loginwithgoogle component
import React from 'react'
import { useEffect } from 'react'
const Loginwithgoogle = () => {
function handleCallBackResponse(response){
console.log("Encoded JWT ID Token " + response.credential);
}
useEffect(() => {
google.accounts.id.initialize({
client_id: "731249793019-qbik3a0k62db0d3k5vd72j98ivkl2hds.apps.googleusercontent.com",
callback: handleCallBackResponse
});
google.accounts.id.renderButton(
document.getElementById("signInDiv"),
{ theme: "outline", size:"large"}
)
}, [])
return (
<div className="loginwithgoogle">
<div id="signInDiv">
</div>
</div>
)
}
export default Loginwithgoogle
Here it is main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import Bar from './components/Bar'
import IconsText from './components/IconsText'
import Searchbar from './components/Searchbar'
import './index.css'
import {BrowserRouter as Router, Routes,Route} from 'react-router-dom'
import Login from './components/Login'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/loginwithgoogle' element={<Login/>} />
</Routes>
</Router>
<Bar />
<IconsText />
<Searchbar/>
</React.StrictMode>
)
I need to solve this issue when someone clicked on login it should redirect to loginwthgoogle page
You can render the Bar, IconsText, and Searchbar components on their own route.
ReactDOM.createRoot(document.getElementById('root'))
.render(
<React.StrictMode>
<Router>
<Routes>
<Route
path="/"
element={(
<>
<Bar />
<IconsText />
<Searchbar />
</>
)}
/>
<Route path='/loginwithgoogle' element={<Login />} />
</Routes>
</Router>
</React.StrictMode>
);
If you want to render these components conditionally with other routes then create a layout route component.
Example:
import { Outlet } from 'react-router-dom';
const Layout = () => (
<>
<Bar />
<IconsText />
<Searchbar />
<Outlet />
</>
);
ReactDOM.createRoot(document.getElementById('root'))
.render(
<React.StrictMode>
<Router>
<Routes>
<Route element={<Layout />}>
... routes with layout ...
</Route>
... routes without layout ...
<Route path='/loginwithgoogle' element={<Login />} />
</Routes>
</Router>
</React.StrictMode>
);
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
Hello community :) My first Q here.
(There were couple of similar questions but they didn't answer my particular code issue and I tried them to apply but without success.)
So I would like to render the child component in nested route without the parent one showing in the view
See the picture at the end --->
import React from 'react';
import {BrowserRouter, Route, Switch, Link} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Routing from "./components/Routings";
export default class Browserrouting extends React.Component {
render () {
return (
<BrowserRouter>
<Routing/>
</BrowserRouter>
)
}
}
Here is the Routing component :
import About from "../views/About";
import HomeBackground from "../views/Background";
import ShelterApp from '../views/ShelterApp';
export default (props) => (
<div className="flexColumn">
<div> <ul className="flexRow center">
<li className="homeLink"><Link className="colorBrown" to="/">Home</Link></li>
<li className="homeLink"><Link className="colorBrown" to="/shelterApp">Shelter App</Link></li>
<li className="homeLink"><Link className="colorBrown" to="/about">About our site and shelter</Link></li>
</ul></div>
<Switch>
<Route exact path="/" component={() => <HomeBackground />} />
<Route path="/about" component={() => <About />} />
<Route path="/shelterApp" component={() => <ShelterApp />} />
</Switch>
</div>
)
And in ShelterApp component I have some text and imported another component which contains the links and nested routes I would like to display without showing the parent component ShelterApp:
class ShelterApp extends React.Component {
render() {
return (
<div className="flex center">
<div className="card center" style={{ "width": "25em", "height":"25em" }}>
<div className="card-body textCenter">
<h5 className="card-title paddingTitle">Welcome to our site</h5>
<h6 className="card-subtitle mb-2 text-muted"> Login or register if it's your first time</h6>
</div>
<LoginRouting match={this.props.match} />
</div>
</div>)
}
}
export default ShelterApp;
and the final child componet with the "lowest" routes in hierarchy :
class LoginRouting extends React.Component {
constructor(props) {
super(props)
this.state = {
users: []
}
}
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};
render() {
const { match, location, history } = this.props;
return (
<div >
<div className="flexRow center">
<Button className={" loginRouting"} type={"button"} bootstrapClass={"btn btn-light"} child={<Link to="/shelterApp/login">Login form</Link>} />
<Button className={" loginRouting"} type={"button"} bootstrapClass={"btn btn-light"} child={<Link to="/shelterApp/register">Register form</Link>} />
</div>
<div>
<Route path="/shelterApp/login" render={() => <Login />} />
<Route path="/shelterApp/register" render={() => <Register />} />
</div>
</div>
)
}
}
export default withRouter( LoginRouting)
enter image description here
IMAGE with the view :
I will be thankful for any advises !
On your ShelterApp component you can create a new state called hideInfo, or something, that tracks if the user clicked on "Login form" or "Register form".
Then you can pass a props to your <LoginRouting> component.
When the user clicks on "Login form" or "Register form" you change this.hideInfo.
<LoginRouting
onShowForm={() => this.setState({ hideInfo: !hideInfo})}
match={this.props.match}
/>
I am using react-sidenav package to navigate around different components based on what's clicked. However, this is not working when I try implementing this functionality. Here is my SideNav component:
import React from 'react';
import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
//specify the base color/background of the parent container if needed
const MySideNav = () => {
return (
<div style={{background: '#2c3e50', color: '#FFF', width: 200}}>
<SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4' defaultSelected='pos' onItemSelection={ (id, parent) => {
<Router>
<Redirect push to={`/${id}`} />
</Router>
}}>
<Nav id='home'>
<NavText>Home</NavText>
</Nav>
<Nav id='about'>
<NavText>About</NavText>
</Nav>
</SideNav>
</div>
)
}
export default MySideNav;
I also have this in Routes.js file, which I render in App.js:
<main>
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/about" exact component={About} />
</Switch>
</main>
Then I have separate About.js and Home.js components, which I have already imported in Routes.js. When I click individual items in the sidebar, I am not able to redirect to any other components.
I can't figure out where I am going wrong since I am a beginner in React. Could someone please assist me with this? That would be much appreciated!
UPDATE
When using withRR4, the redirection is being done in the url bar, but the target components are not being rendered. Here's is my code for this:
import React from 'react';
import { Nav, withRR4 , NavIcon, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
const SideNav = withRR4();
//specify the base color/background of the parent container if needed
const MySideNav = () => {
return (
<div style={{background: '#2c3e50', color: '#FFF', width: 200}}>
<Router>
<SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4'>
<Nav id='home'>
<NavText>Home</NavText>
</Nav>
<Nav id='about'>
<NavText>About</NavText>
</Nav>
</SideNav>
</div>
)
}
export default MySideNav;
You need to use withRR4 as explained in the Docs here:
https://www.npmjs.com/package/react-sidenav#react-router-4-integration
EDIT
You need to import the <Route/> 's you want to use inside the <Router />
import React from 'react';
import { withRR4, Nav, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const SideNav = withRR4();
class MySideNav extends React.Component {
renderHome = () => {
return <div>Home</div>;
};
renderAbout = () => {
return <div>About</div>;
};
render() {
return (
<Router>
<div style={{ background: '#2c3e50', color: '#FFF', width: 200 }}>
<SideNav default='home' highlightColor='#E91E63' highlightBgColor='#00bcd4'>
<Nav id='home'>
<NavText> Home </NavText>
</Nav>
<Nav id='about'>
<NavText> About </NavText>
</Nav>
</SideNav>
</div>
<div style={{ padding: 20 }}>
<Route exact path="/" render={this.renderHome}/>
<Route path="/home" render={this.renderHome}/>
<Route path="/about" render={this.renderAbout}/>
</div>
</Router>
);
}
}
I am not 100% if you must put these Routes here, can you test it out for me?
So I have a LoginPage that looks like this,
and when you login, you will be directed to this page:
now, I want my login page to don't have a navigation and look like this,
how can I do that?
so I have this, in my App.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import LoginPage from "./Login";
import Main from "./Main";
import Menu from "./Menu";
class App extends Component {
constructor(props){
super(props);
this.state={
loginPage:[],
uploadScreen:[]
}
}
render() {
return (
<div className="ui container">
<Route path="/" exact component={LoginPage} />
<Menu />
<Main />
</div>
);
}
}
export default App;
My Menu.js:
import React from 'react';
import { Link } from 'react-router-dom';
import {
Container,
Dropdown,
Menu,
} from 'semantic-ui-react';
const FixedMenuLayout = () => (
<div>
<Menu fixed='top' inverted>
<Container>
<Menu.Item as='a' header>
IRC
</Menu.Item>
<Menu.Item as={ Link } to= "/upload" >Create Material</Menu.Item>
<Menu.Item as={ Link } to= "/assign-material" >Assign Material</Menu.Item>
<Menu.Item as={ Link } to= "/create-group">Create Group</Menu.Item>
<Menu.Item as={ Link } to= "/assign-doctor">Assign Group</Menu.Item>
<hr />
<Dropdown item simple text='Name of Logged In User'>
<Dropdown.Menu>
<Dropdown.Item>Log Out</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Container>
</Menu>
</div>
)
export default FixedMenuLayout
and my Main.js:
import React from 'react';
import { Route ,Switch } from 'react-router-dom';
import UploadScreen from "./UploadScreen";
import CreateGroup from "./CreateGroup";
import AssignDoctor from "./AssignDoctor";
import AssignMaterial from "./AssignMaterial";
const Main = () => (
<main>
<Switch>
<Route path="/upload" exact component={UploadScreen} />
<Route path="/assign-material" exact component={AssignMaterial} />
<Route path="/assign-doctor" exact component={AssignDoctor} />
<Route path="/create-group" exact component={CreateGroup} />
</Switch>
</main>
)
export default Main
I am new in ReactJS so please be considerate in answering and thank you for your time!
my App.js
render() {
const path = window.location.pathname;
return (
<div className="ui container">
<Route path="/" exact component={LoginPage} />
{path !== '/' &&
<div>
<Menu />
<Main />
</div>
}
</div>
);
}
and it works now :)