My Navigation code as:-
const Navigation = (props) => {
console.log(props);
return (
<Navbar bg="primary" variant="dark">
<Navbar.Brand href="/">Dating Service</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/CreateProfile">Create Profile</Nav.Link>
<Nav.Link href="/ViewProfile">View Profile</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default withRouter(Navigation);
It looks like this:-
The whole page is aligned center. How can make it left aligned?
I could fix it by this:-
npm install bootstrap
Later add import 'bootstrap/dist/css/bootstrap.min.css';
Also, it is possible that we can include bootstrap.min.css cdn directly at public/index.html without installing bootstrap.
Related
I want to separate authenticated links from the rest. All this is done in the layout.js file where I verify whether the user is authenticated or not. If he or she is authenticated, he is directed to the the following div:
return(
<>
{isAuthenticated? :
<div
className={
activeMenu
? 'dark:bg-main-dark-bg bg-main-bg min-h-screen md:ml-72 w-full '
: 'bg-main-bg dark:bg-main-dark-bg w-full min-h-screen flex-2 '
}
>
<div className="fixed md:static bg-main-bg dark:bg-main-dark-bg navbar w-full ">
<Navbar />
</div>
<Routes>
<Route path="/ecommerce" element={<Ecommerce />} />
<Route path="/bill" element={<bill />} />
</Routes>
</div>
: ...
</>
Now the problem is, I can't figure out the right way to bring the the above Routes to the App.js without affecting the behaviour of the sidebar and the pages. Can I use Routes in more than 1 file? That is the App.js file and the Layout file.
I'm having trouble with a project where I need to navigate to a certain section of a page when a navigation item is clicked.
I am using the Navlink component as follows and can't put my hand on a solution.
In my navigation component Toolbar.js, I have the following code concerning the navigation item.
Toolbar.js
<li>
<NavLink
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to="/"
>
agence
</NavLink>
</li>
Then I'm using the component as follows in Home.js :
Home.js
return (
<Layout>
<Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
<SideDrawer show={this.state.sideDrawerOpen} />
{backDrop}
<Conseil />
<div className={classes.white}></div>
<Sigles />
<NotreAgence />
<Prestations />
<ScrollableMenu />
<Form />
<Footer />
</Layout>
);
}
What I'm trying to do is navigate to the "NotreAgence" component when I click on the "accueil" NavLink showed above.
I've tried to mimic the html :
Go to Title
<div>
<h1 id="scroll">Title</h1>
</div>
as follows :
<NavLink
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to={{
pathname: '/',
hash: '#our-agency'
}}
>
agence
</NavLink>
and giving a div tag the "#our-agency" tag.
But it doesn't seem to work.
I'm a bit stuck. Any help ?
Thank you very much :)
to={{
pathname: '/',
hash: '#our-agency'
}}
when you have / in link - it force to update page.
So if you want to reach section on current page you need use just
to="#our-agency"
Quick update to close this issue. One solution would be to use the react-scroll library.
In the Navigation menu/bar :
import it => import { Link } from 'react-scroll'
Define your navigation item as follows (using the code of the question to make it more clear) :
Toolbar.js
import { Link } from 'react-router'
(...)
<li>
<Link
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to="notreAgence"
>
agence
</Link>
</li>
Give your component an id prop with a value matching the to props from the Link. (Here it would be 'section1'.
Home.js
return (
<Layout>
...
<NotreAgence id='notreAgence' />
...
</Layout>
);
}
This do the the trick.
For more information : https://scotch.io/tutorials/implementing-smooth-scrolling-in-react
I have a react navbar on my site and I would like to redirect my page to an .html page, but it's not working properly.
this is the component I am using, with the href reference to the QR CODE page, at the same level that the component page is using.
project link: https://github.com/rudsonramon/customerservice.git
import React from 'react';
import { FaHome } from 'react-icons/fa';
import FormControl from 'react-bootstrap/FormControl';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';;
function HeaderContainer() {
return (
<div>
<Container>
<Navbar fixed="top" bg="primary" variant="dark">
<Navbar.Brand href="#home">ConcertTI</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home"> <FaHome /> </Nav.Link>
<Nav.Link href="QrCode.html" target='_self'>QR Code</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-light">Procurar</Button>
</Form>
</Navbar>
</Container>
</div>
)
}
export default HeaderContainer;
./Qrcode.html directs it to a sub folder named Qrcode.html.
remove the ./ and try again.
Is there any way how to create two different pages starting with same sring - GuidePage and GuideDetailPage using react router?
My code doesn't work, after open /guide it shows GuidePage components, it's ok. But after open /guide/detail it shows GuidePage NOT GuideDetailPage.
What is wrong?
<Router history={history}>
<main>
<MenuHeader />
<Switch>
<Route path='/guide'>
<Route path='/' component={GuidePage} />
<Route path='/detail' component={GuideDetailPage} />
</Route>
<Redirect to='/home' />
</Switch>
<Footer />
</main>
</Router>
So I can use /guide-detail for GuideDetailPage but I want to use guide/detail.
In React Router 4, routes are dynamic instead of static, you don't need to declare all routes in one file, but declare nested route in component having those routes.
Here is Basic Example, You need to add two routes inside Guide Component and to make it relative use match.path.
import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/guide">Guide</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/guide" component={Guide} />
</Switch>
</div>
</Router>
);
}
function Guide({ match }) {
return (
<div>
<h2>Guide</h2>
<ul>
<li>
<Link to={`${match.url}`}>guide</Link>
</li>
<li>
<Link to={`${match.url}/detail`}>Guide Detail</Link>
</li>
</ul>
<Route path={`${match.path}/detail`}
component={GuidePage} />
<Route
exact
path={match.path}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function GuidePage() {
return (
<div>
<h2>GuidePage</h2>
</div>
);
}
export default BasicExample;
Hope that helps!!!
I'm using react-bootstrap for styling my website. I want to add Navbar where all of the elements are mirrored to the right.
export default class XNavbar extends React.Component {
render() {
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
Brand
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
}
The result is
But what I actually want it to be
[ World Hello Brand ]
I tried using pullRight on the <Navbar but it didn't work. I also added <html dir="rtl">, but this also didn't help. How can I do it?
For those of you, like me, can't get pullRight work, it seems that adding the ml-auto works better.
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="#one">One</Nav.Link>
<Nav.Link href="#two">Two</Nav.Link>
</Nav>
</Navbar.Collapse>
Found the solution here: https://stackoverflow.com/a/54684784/95552
In case you haven't already figured this out, or someone else stumbles on it. All you should have to do is add the pullRight prop to the actual Nav component. The result should be a Brand Logo in the left, and the navigation pulled to the right.
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
Brand
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
Actually, according to the documentation of Bootstrap React pullRight should do it. But I wasn't able to realize it either. I found a working solution which I described here. Just use <Nav className="ml-auto">
You can put your elements inside a div and than float div to right by this css property
.exampleDiv {
float: right;
}