I'm making my portfolio with fullpage.js and I wanted to add a route every time I get to the next element as I scroll. For example: when I open the page I get the<Home /> element in that section I want to put the router /#home when scrolling to the 2nd element <About /> the router /#about is placed, and so on, as I do this?
const Fullpagescroll = () =>{
return (
<>
<Header />
<ReactFullpage
scrollingSpeed = {1150}
navigation
render={() => {
return (
<>
<div className='section'>
<Home />
</div>
<div className='section'>
<About />
</div>
<div className='section'>
<Project />
</div>
<div className='section'>
<Contact />
</div>
</>
);
}}
/>
</>
);
}
Example
<Router>
<div className='section' >
<Route path='/#home'>
<Home />
</Route>
</div>
<div className='section'>
<Route path='/#about'>
<About />
</Route>
</div>
<div className='section'>
<Route path='/#project'>
<Project />
</Route>
</div>
<div className='section'>
<Route path='/#contact'>
<Contact />
</Route>
</div>
</Router>
Just use the anchors option as detailed on the the fullpage.js documentation:
anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. Be careful! anchors can not have the same value as any ID element on the site (or NAME element for IE). Now anchors can be defined directly in the HTML structure by using the attribute data-anchor as explained here.
Alternatively you can also use the attribute data-anchor on each of your sections.
You can see examples of this on most of the examples online like this one as well as on the ones provided on the github repository.
Related
I'm trying to make a website, and I would like the first section of the landing page (the navigation header) to have a transparent background. The rest of the pages do not need transparent backgrounds.
The landing page is built using fullPage.js. I have tried using the scroll event, but it doesn't seem to be supported with fullPage.js. How else can I apply a separate CSS style to just one section using fullPage.js?
I'm adding current Header component code in App.js of React, and confusing to make only one status for the very first landing page's section's header.
function App() {
return (
<>
<Header />
<Routes>
<Route path='/' element={<MainPage />} />
<Route path='/company' element={<IntroPage />} />
<Route path='/technology' element={<TechnologyPage />} />
<Route path='/products' element={<ProductsPage />} />
<Route path='/RnD' element={<RnDPage />} />
<Route path='/support' element={<SupportPage />} />
<Route path='/login' element={<LoginPage />} />
<Route />
<Route />
</Routes>
<Footer />
</>
);
}
export default App;
There may be a better solution, but the only one I can think of is to use two different heads. One on the page where it needs to be transparent, and another one on for rest. Give them different ID's, and just set it to transparent on the one where you need it.
I am creating an application using ReactJS. I am using react router v4 from react-router-dom.
I have written routes in index.js file.
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path='/dashboard' component={Viewport} />
</Switch>
</BrowserRouter>
Rest of the application in Viewport.js file.
return (
<div className="">
<Sidebar navigation={this.viewport} />
<HeaderBanner user={this.props.user} />
<div className="center-panel">
//todo
//Can I use router here?
</div>
</div>
)
After user login's, I am rendering Viewport which contains Sidebar and header bar by default. Based on the item click in the sidebar navigation, I need to render components dynamically. As of now, if I write anything in the place of todo, it renders only that component for the complete browser window.
Is there any way to use routers in multiple places of the application? If yes, how can I implement it? If no, what's the best solution?
As far as I have seen, routers will be stacked at one place in the application.
Thanks in advance.
I followed a tutorial on youtube recently which was very useful
So I took some of it and applied it to your setup
<BrowserRouter>
<div>
<Route exact path="/" component={Login} />
<Route exact path='/dashboard' component={Viewport} />
</div>
</BrowserRouter>
import { NavLink, Route } from 'react-router-dom';
class Viewport extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div className="Side-bar">
<NavLink
activeClassName="active"
to={`${this.props.match.url}/sub-page-name-1`}>Sub Page 1</NavLink>
<NavLink
activeClassName="active"
to={`${this.props.match.url}/sub-page-name-2`}>Sub Page 2</NavLink>
<NavLink
activeClassName="active"
to={`${this.props.match.url}/sub-page-name-3`}>Sub Page 3</NavLink>
</div>
<HeaderBanner user={this.props.user} />
<div className="center-panel">
<Route path={`${this.props.match.url}/sub-page-name-1`} component={SubPagePanel1} />
<Route path={`${this.props.match.url}/sub-page-name-2`} component={SubPagePanel2} />
<Route path={`${this.props.match.url}/sub-page-name-3`} component={SubPagePanel3} />
</div>
</div>
)
}
}
I removed Switch as well because I didn't use it for my sub pages... :-S
Update: Have created a repo showing a working example of sub page content
https://github.com/PocketNinjaDesign/so-sub-routes-answer
Yes you can use <Routes> in as many places as you want. <Router> components are the ones you can only use once.
In my Header,
<NavItem>
<NavLink tag={Link} to="/template/editor">New Template</NavLink>
</NavItem>
In my Router page
<BrowserRouter>
<div className="container-fluid">
<Header />
<section className="page-content">
<Route exact path="/" component={HomePage} />
<Route exact path="/template/editor/:id?" component={Authenticate(EditorPage)} />
</section>
</div>
</BrowserRouter>
If I'm on my HomePage (/) and click on the New Template Link (/template/editor), it will redirect me to the New Template page. However, if I'm on (/template/editor/3), and click on the New Template Link (/template/editor), the address bar updates but the page isn't routed. I'm sure I'm missing something simple but I can't figure out what.
I'm not sure what is the problem but I believe that what you tried to do is:
<BrowserRouter>
<div className="container-fluid">
<Header />
<section className="page-content">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/template/editor/:id?" component={Authenticate(EditorPage)} />
</Switch>
</section>
</div>
</BrowserRouter>
(Notice I used Switch from react-router-dom package)
also, you said you are using react-redux there is a known issue with a view not updating. Look at this question.
I have run into an issue where React Router's NavLink is not working upon the initial render of a dashboard screen, after a successful login. After trying many different things I am posting here. You probably won't know why either but its worth a shot.
An example layout of the dashboard is as follows:
<div>
<nav>
<NavLink>Link 1</NavLink>
<NavLink>Link 2</NavLink>
<NavLink>Link 3</NavLink>
<NavLink>Link 4</NavLink>
</nav>
<div>
<!-- CONTENT -->
</div>
</div>
Upon initial render Link 2 will be unresponsive, while Link 1, 3, and 4 work fine. Clicking Link 3 for example will render new elements in the content section and then Link 2 will work.
I have tried even changing the NavLinks to anchor tags and adding my own click handler, but no matter what I try the second Link will not work until some mysterious event takes place.
Any ideas?
Edit* Add routes for #arracso
Authenticated Route:
<Switch>
<Route path="/route-1" component={SomeComponent} />
<Route path="/*" component={Dashboard} />
</Switch>
Dashboard:
<Row>
{navigationElement}
<Column>
<Switch>
<Route path="/1" component={A} />
<Route exact path="/2" component={B} />
<Route path="/2/1" component={C} />
<Route path="/2/1" component={D} />
</Switch>
</Column>
</Row>
For some reason, when I load/refresh the page in my app, the correct link is shown as active. When I click on a different link, it works as expected and becomes active, however the original link is also showing up as active.
UPDATE: I've just realised that when I click anywhere outside the menu bar, the active link loses its active status aswell, but the original link remains active. Essentially, when I click elsewhere, the menu returns to the example given in the first screenshot, even though the route URL is different.
Perhaps easier to demonstrate with screenshots:
This is shown on page load/refresh - as expected
But click on another link, and both of them now show as active
Click on another one, and the active link changes, but the original one is still showing as active as well
Here's my code:
One of the link elements (they are all identical, apart from SVG code and labels):
const AnnouncementLink = (props) => {
return(
<Link to="/announcements"
className={styles.assignmentLinkHolder}
activeClassName={styles.activeLinkHolder}
onClick={()=>props.hideSlideOver()}>
<span className={styles.iconHolder}>
<svg>
//Lots of SVG code here!
</svg>
<span className={styles.label}>
Announcements
</span>
</span>
</Link>
)
}
The menu element in full (not including some of the variable declarations which aren't relevant):
const photo = require('../../images/profilePics/blankface.jpg');
const SideMenu = (props) => {
//VARIABLE DECLARATIONS...
return (
<div className={styles.sideMenu}>
<img src={photo} className={styles.profilePic} />
<div className={styles.menuItem}>
<DashboardLink hideSlideOver={props.hideSlideOver} />
<CoursesLink hideSlideOver={props.hideSlideOver} />
<AssignmentsLink hideSlideOver={props.hideSlideOver}
badge={totalAssignments} />
<UsersLink hideSlideOver={props.hideSlideOver} />
<AnnouncementsLink hideSlideOver={props.hideSlideOver} />
<ReportsLink hideSlideOver={props.hideSlideOver} />
<DiscussionsLink hideSlideOver={props.hideSlideOver} />
</div>
</div>
)
}
And the React-router parent:
const Admin = () => {
return (
<Provider store={createStoreWithMiddleware(rootReducer)}>
<Router history={browserHistory}>
<Route path="/" component={Academy}>
<IndexRedirect to="/dashboard" />
<Route path="/dashboard" component={Dashboard} />
<Route path="/courses" component={CoursesMenu} />
<Route path="/assignments" component={AssignmentsMenu} />
<Route path="/users" component={UsersMenu} />
<Route path="/announcements" component={AnnouncementsMenu} />
</Route>
</Router>
</Provider>
)
}
OK, seem to have resolved it - not sure if this is a proper solution or just a workaround, but it seems to have done the trick.
The answer lies in the <SideMenu> component. By giving it a prop of path and linking this to the changing URL, it rerenders the component each time the URL changes. Also by removing <IndexRedirect> as suggested by oklas and changing it to <Route to='/'>, it prevents the active class from sticking on the <DashBoard> link.
Here's the code - this is from a section of the app that wasn't referenced above - the parent of <SideMenu>
<div className={styles.container}>
<SideMenu path={this.props.children.props.route.path} /> { //This 'path' property solves the problem by rerendering the SideMenu component every time the path changes }
<ViewPort>
{this.props.children}
</ViewPort>
</div>