I can navigate to {Home} component using "react-router" like this:
import { Route } from "react-router";
<Route exact path="/" component={Home} />
I would like to navigate to {Home} component using "react-bootstrap/Navbar" instead? Existing example provide only code like this
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
I don't understand how to modify this code to use the existing {Home} component?
Please help
Thank you
You can use something like this
And make sure to import Link
import { Link } from 'react-router-dom';
<Nav className="mr-auto">
<Nav.Link as={Link} to="/create-order" >
Create Order
</Nav.Link>
<Nav.Link as={Link} to="/update-profile" >
Update Profile
</Nav.Link>
</Nav>
You can use as property to change the type of the NavLink item and to property to set the path.
Try this
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link>
<Route exact path="/home" component={HomeComponent} />
</Nav>
</Navbar.Collapse>
</Navbar>
Related
I'm using a Navbar component with Nav.Link components for each page that I'm linking to. I have those links centered. I would like to add a 'Sign In' button that is justified to the right. So far, the "ml-auto" class name has not worked. Is there a simple way to justify individual (or groups) of links differently on the same Navbar?
Here is the code:
return (
<Navbar bg="dark" variant="dark" fixed="top">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="justify-content-center">
<Nav defaultActiveKey="1">
<Nav.Link as={Link} to="/about" eventKey="1">About Me</Nav.Link>
<Nav.Link as={Link} to="/exp" eventKey="2">Experience</Nav.Link>
<Nav.Link as={Link} to="/edu" eventKey="3">Education</Nav.Link>
<Nav.Link as={Link} to="/skills" eventKey="4">Skills</Nav.Link>
<Nav.Link href="#signIn">Sign In</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Here is my Navbar currently
Is there any way how to create/structure next.js app for navigation without losing header component state?
Let me explain.
I have header component like this:
import { useState } from "react"
import Link from 'next/link'
export const Header = () => {
const [value, setValue] = useState(1)
return (
<header>
HEADER
<button onClick={() => setValue(value + 1)}>
{value}
</button>
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/test">
<a>About Us</a>
</Link>
</li>
</ul>
</header>
)
}
export default Header
There is a easy couter.
i have two pages.
Index:
const Home = () => (
<div className="container">
<Header />
<main>
Index
</main>
</div>
)
Test:
import Head from 'next/head'
import Header from '../components/header'
const Home = () => (
<div className="container">
<Header />
<main>
Test
</main>
</div>
)
export default Home
I would like to navigate between this pages without losing state i header component. It is possible and how?
One thing you can do is to wrap your entire Next.js app in a layout component which includes the <Header/>. Check out this sandbox I created to see how this pattern can be applied to the example in your question:
https://codesandbox.io/s/so-q-63755826-b-forked-7xt6u
Check out this great article which explains this pattern as well as some other solutions for persisting layout in Next.js:
https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
i'm trying to create a web app with react redux and router, and i'm getting a wierd behaviour, the Router is rendering only on refresh.
that my App.js
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Router, Switch, Route, Link } from "react-router-dom";
import { ModalProvider } from './modal/modalContext';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Login from "./components/Login";
import Register from "./components/Register";
import Home from "./components/Home";
import Profile from "./components/Profile";
import BoardUser from "./components/BoardUser";
import BoardModerator from "./components/BoardModerator";
import BoardAdmin from "./components/BoardAdmin";
import DataService from "./services/data.service";
import { logout } from "./actions/auth";
import { clearMessage } from "./actions/message";
import { setDc } from "./actions/dc";
import { history } from "./helpers/history";
import simplidc_logo from "./images/dns-24px.svg"
import DetailedRackCard from './components/detailed_rack_card'
const App = () => {
const [showModeratorBoard, setShowModeratorBoard] = useState(false);
const [showAdminBoard, setShowAdminBoard] = useState(false);
const { user: currentUser } = useSelector((state) => state.auth);
const dispatch = useDispatch();
useEffect(() => {
history.listen((location) => {
dispatch(clearMessage()); // clear message when changing location
});
}, [dispatch]);
useEffect(() => {
if (currentUser) {
setShowModeratorBoard(currentUser.roles.includes("ROLE_MODERATOR"));
setShowAdminBoard(currentUser.roles.includes("ROLE_ADMIN"));
}
}, [currentUser]);
useEffect(() => {
DataService.getDevices().then(
(devicesResponse) =>{
DataService.getRacks().then(
(racksResponse) =>{
dispatch(setDc(DataService.getDc(racksResponse,devicesResponse)));
}
)
}
)
}, [dispatch]);
const logOut = () => {
dispatch(logout());
};
return (
<div>
<ModalProvider>
<Router history={history}>
<div>
<nav className="navbar navbar-expand navbar-dark bg-dark">
<Link to={"/"} className="navbar-brand">
SimpliDC
<img
alt=""
src={simplidc_logo}
width="30"
height="30"
/>
</Link>
<div className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={"/home"} className="nav-link">
Home
</Link>
</li>
{showModeratorBoard && (
<li className="nav-item">
<Link to={"/mod"} className="nav-link">
Moderator Board
</Link>
</li>
)}
{showAdminBoard && (
<li className="nav-item">
<Link to={"/admin"} className="nav-link">
Admin Board
</Link>
</li>
)}
{currentUser && (
<li className="nav-item">
<Link to={"/user"} className="nav-link">
User
</Link>
</li>
)}
</div>
{currentUser ? (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/profile"} className="nav-link">
{currentUser.username}
</Link>
</li>
<li className="nav-item">
<a href="/login" className="nav-link" onClick={logOut}>
LogOut
</a>
</li>
</div>
) : (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/login"} className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to={"/register"} className="nav-link">
Sign Up
</Link>
</li>
</div>
)}
</nav>
<input className="" type="text" placeholder="Type any vaule to search in the DC..."/>
<div className="container mt-3">
<Switch>
<Route exact path={["/", "/home"]} component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profile" component={Profile} />
<Route path="/user" component={BoardUser} />
<Route path="/mod" component={BoardModerator} />
<Route path="/admin" component={BoardAdmin} />
<Route path="/rack/:id" component={DetailedRackCard}/>
</Switch>
</div>
</div>
</Router>
</ModalProvider>
</div>
);
};
export default App;
and i found something wierd happening while looking in the react dev tools on the Router component. this is the location in state after refresh:
and this is the same object after i click a route (login):
i'm desprate for help....
yes, that my only router in the whole app.
thanks!
The state of the <Router/> comes from the history prop which your are providing. You are not modifying that history properly. The bad mutation will be somewhere in another file. It seems like you are calling history.push() with the entire action object instead of just the action.location property.
Using the <Router/> component with a custom history prop is an advanced design pattern that you generally want to avoid unless absolutely necessary. I don't think it's necessary here, at least not for the code in this particular file.
I would recommend using a <BrowserRouter/> (or <HashRouter/>, etc. instead. If you do that, you'll need some other way to address the history.listen subscription (sidenote: you want to use a cleanup function to stop listening when the component unmounts).
You can use a useEffect hook to respond to changes in the location which you access from the useLocation hook.
const location = useLocation();
useEffect(() => {
dispatch(clearMessage()); // clear message when changing location
}, [location, dispatch]);
If you don't want to clear the message on the first render, you can add some additional checks before dispatching. You can potentially use a usePrevious custom hook or something like it. Here I am using useRef to store the previous location. The initial value for the ref is the location from useLocation, so on the first render they will be equal.
const location = useLocation();
const locRef = useRef(location);
useEffect(() => {
console.log(locRef.current, location);
// will be equal on first render
if (locRef.current !== location) {
dispatch(clearMessage());
}
locRef.current = location;
}, [location, dispatch]);
You could modify this to look at just the pathname if you want.
I'm wondering If I can setup a v-app-bar from Vuetify in the shared layout file and from the other layout send info, like for example the page title.
This is the shared layout
<template>
<v-app>
<v-navigation-drawer app permanent dark color="secondary">
//nav items in here
</v-navigation-drawer>
<v-content>
<v-container fluid>
<slot></slot>
</v-container>
</v-content>
</v-app>
</template>
The other layout file will be placed in the <slot></slot> tag, this is the other layout file where the app bar is
<template>
<v-app>
<layout>
<v-app-bar absolute fixed color="white" elevate-on-scroll>
<h2>Categories</h2>
<v-spacer></v-spacer>
<v-btn>New</v-btn>
</v-app-bar>
</layout>
</v-app>
</template>
I'm not familiar with Vuetify, I'm trying to learn so is there a way to do this? Also should I have the <v-app></v-app> in both files or only the shared layout?
Your usual setup would be that you initiate everything from your App.vue, which is basically your source file. From here on you can load all the components you need. If you use vue-router (recommended), then you can insert the <router-view /> tag to display the current content of the page you're in. That way you will always have the same content (app-bar, nav drawer) above and below (footer) the <router-view />.
You could remove the MyNavDrawer component and just put the v-navigation-drawer in there directly but I feel like most navigation-drawers take up a lot of markup and having it abstracted away in a component looks a lot cleaner.
// App.vue
<template>
<v-app>
<MyNavDrawer />
<v-content>
<v-container fluid>
<!-- If you use vue router -->
<router-view />
<!-- If you just want to display other components, add them -->
<MyOtherComponent />
</v-container>
</v-content>
<!-- Maybe add a footer here -->
<MyFooter />
</v-app>
</template>
<script>
import MyNavDrawer from "/path/to/myNavDrawer.vue";
import MyOtherComponent from "/path/to/myOtherComponent.vue";
import MyFooter from "/path/to/myFooter.vue";
export default {
components: {
MyNavDrawer,
MyOtherComponent,
MyFooter
}
}
</script>
// myNavDrawer.vue
<template>
<v-navigation-drawer app permanent dark color="secondary">
//nav items in here
</v-navigation-drawer>
</template>
I was trying to create a survey app using React, Redux. While trying to run the program on localhost:3000, I am getting this React.Children.only expected to receive a single React element child error. I have tried using various solutions which programmers have mentioned elsewhere but nothing has worked. The codes are as below. I must admit I am an absolute tyro as far as programming is concerned
App.js:
import React from 'react';
import {BrowserRouter,Route} from 'react-router-dom';
import Header from './Header';
const Dashboard =() => <h2>Dashboard</h2>;
const SurveyNew =() => <h2>SurveyNew</h2>;
const Landing =() => <h2>Landing</h2>;
const App = () => {
return (
<div>
<BrowserRouter>
<div>
<Header />
<Route exact path= "/" component = {Landing} />
<Route exact path = "/surveys" component= {Dashboard} />
<Route path = "/surveys/new" component={SurveyNew} />
</div>
</BrowserRouter>
</div>
);
};
export default App;
The code of header.js file is as below:
import React, {Component} from 'react';
class Header extends Component {
render () {
return (
<div>
<nav>
<div className = "nav-wrapper">
<a className = "left brand-logo">
Emaily
</a>
<ul className="right">
<li>
<a> Login with Google </a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Header;