Параллакс страница Реагировать, перенаправить URL-адрес на странице к компоненту - PullRequest
Новая
       8

Параллакс страница Реагировать, перенаправить URL-адрес на странице к компоненту

0 голосов
/ 04 марта 2020

Я создаю эффект прокрутки параллакса в reactjs, я хочу перенаправить ссылку на странице.

Детали: у меня есть одностраничное приложение, в котором у меня есть NavBar в этом у меня есть ссылки на несколько страниц, таких как Главная страница, О нас и контакты . Я хочу, чтобы страница перенаправлялась на Контакт компонент, когда я нажимаю на контактную ссылку в NavBar , но теперь она просто получает refre sh и я все еще на странице Home . Следовательно, URL обновляется, но я не смогу увидеть свой компонент Контакт , поскольку он виден только при прокрутке вниз.

Есть ли способ, когда При переходе по ссылкам с NavBar URL-адрес приведет меня непосредственно к компоненту.

Приложение. js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import './App.css';
import WrapperParallax from './components/layout/WrapperParallax';

import Intro from './components/pages/Intro';
import About from './components/pages/About';
import Assignments from './components/pages/Assignments';
import Resume from './components/pages/Resume';
import Projects from './components/pages/Projects';
import Contact from './components/pages/Contact';

const App = () => {
  return (
      <Router>
        <Navbar />
        <WrapperParallax />
        <Switch>
          <Route exact path='/' component={Intro} />
          <Route exact path='/home' component={Intro} />
          <Route exact path='/about' component={About} />
          <Route exact path='/assignments' component={Assignments} />
          <Route exact path='/resume' component={Resume} />
          <Route exact path='/projects' component={Projects} />
          <Route exact path='/contact' component={Contact} />


        </Switch>
      </Router>
  );
};

export default App;

Navbar 

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

const NavBar = () => {
  return (
    <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark' sticky='top' className='navbar-navHeader'>
      <Navbar.Brand href='/' className="navbar-logo">Zeba</Navbar.Brand>
      <Navbar.Toggle className='navbar-toggle' aria-controls='responsive-navbar-nav' />
      <Navbar.Collapse id='responsive-navbar-nav'>
        <Nav className='ml-auto'>
          <Nav.Link className='navbar-link' href='/home'style={{color:'white'}} >Home</Nav.Link>
          <Nav.Link className='navbar-link' href='/about' style={{color:'white'}} >About</Nav.Link>
          <Nav.Link className='navbar-link' href='/assigments' style={{color:'white'}} >Assigments</Nav.Link>
          <Nav.Link className='navbar-link' href='/resume' style={{color:'white'}} >Resume</Nav.Link>
          <Nav.Link className='navbar-link' href='/project' style={{color:'white'}} >Projects</Nav.Link>
          <Nav.Link className='navbar-link' href='/contact' style={{color:'white'}} >Contact</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default NavBar;
...