Где я могу разместить страницу входа на одной странице сайта с прокруткой портфолио в React js? - PullRequest
Новая
       37

Где я могу разместить страницу входа на одной странице сайта с прокруткой портфолио в React js?

0 голосов
/ 18 апреля 2020

На самом деле я создаю портфельное приложение в React. Теперь я сталкиваюсь с проблемой. В навигационной панели есть шесть меню (Главная, О, Навыки, Опыт, Контакт, Соединение) в приложении на одной странице. затем я прокручиваю к определенному связанному компоненту на той же странице. Теперь возникает проблема, когда я добавляю еще одно меню справа (Вход). Я хочу добиться этого, когда я нажму на Вход, тогда другая страница Страница входа будет Когда я заполняю имя пользователя и пароль на странице входа в систему, я попадаю на еще одну страницу, называемую страницей панели инструментов. На странице панели инструментов я хочу создать еще один новый компонент, касающийся обновления моих навыков, опыта, контакта и т. д. c. Как Могу ли я достичь? Пожалуйста, помогите мне. Спасибо заранее.

Пожалуйста, смотрите изображение

// Приложение. js Файл включает в себя все мои страницы Компонент 

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Menu from './Components/Menu';
import Background from './Components/Background'
import Border from './Components/Border'
import Skill from './Components/Skill';
import About from './Components/About';
import Experience from './Components/Experience'
import Image from './Components/Image'
import Contact from './Components/Contact';
import Connect from './Components/Connect';
import { BrowserRouter,Route,Switch} from "react-router-dom";
import Login from './Components/Login'


function App() {


  return (
<div>

    <Menu></Menu>
    <Border></Border>
    <Background></Background>
    <About></About>
    <Image></Image>
    <Skill></Skill>
    <Experience></Experience>
    <Contact></Contact>
    <Connect></Connect>





</div>
  );
}

export default App;

1 Ответ

0 голосов
/ 18 апреля 2020

Вам необходимо настроить маршрут к этим страницам. Мы даем каждому маршруту либо цель component, либо можем отправлять функции в render или children, которые возвращают действительные узлы. children всегда возвращает данный узел, есть ли совпадение или нет. BrowserRouter - это реализация маршрутизатора для HTML5 браузеров. Ссылка - это ваша замена для тегов привязки. Маршрут - это условно показанный компонент, основанный на сопоставлении пути к URL. Switch возвращает только первый соответствующий маршрут, а не все соответствующие маршруты.

Ниже приведен пример того, как он будет выглядеть. 

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;


const App = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>{' '}
      <Link to={{pathname: '/about'}}>About</Link>{' '}
      <Link to="/contact">Contact</Link>

      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route
          path="/contact"
          render={() => <h1>Contact Us</h1>} />
        <Route path="/blog" children={({match}) => (
          <li className={match ? 'active' : ''}>
            <Link to="/blog">Blog</Link>
          </li>)} />
        <Route render={() => <h1>Page not found</h1>} />
      </Switch>
    </div>
  </Router>
);
...