Связывание компонентов в React с использованием React Router Link не работает - PullRequest
1 голос
/ 01 августа 2020

Я новичок в React, и я создаю веб-страницу портфолио, в которой я пытаюсь соединить два компонента с компонентом Link в react-router-dom (аналогично href в тегах привязки HTML). Я использовал кнопку на своей домашней странице, при нажатии которой я перенаправлял меня к компоненту «проекты» на той же странице. Ошибки нет, но когда я нажимаю ее, ничего не происходит. Пожалуйста, помогите мне решить эту проблему.

Ниже приведены фрагменты кода для индексации. js, где указанный путь маршрутизатора ссылается на компонент Projects, в котором перечислены мои проекты, и компонент Home, в который я добавил кнопку с ссылка на путь в маршрутизаторе

Пожалуйста, дайте мне знать, если я ошибаюсь в реализации индекса маршрутизатора

. js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter, Route } from 'react-router-dom';
import {Projects} from './components/Projects';

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route component={App} />
      <Route path= "/projects" component={Projects} />
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

Домашний компонент :

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Projects from './Projects';

export class Home extends Component {
  render() {
    return (
       <div>
          <Link to = '/projects' className="btn btn-primary btn-learn"> 
          View Projects </Link>
       </div>
        ) 
     }
    }
export default Home

Приложение. js, которое отображает компоненты Home и Projects:

import './App.css';
import Home from './components/Home';
import Projects from './components/Projects';
import Skills from './components/Skills';

class App extends Component {
  render() {
    return (
      <div>
          <div>
            <Home/>
            <Skills/>
            <Projects/>
          </div>
      </div>
    );
  }

}

PS: Все остальные объяснения SO по аналогичной проблеме говорят о ссылках на другую страницу, которую я запуталась. Я хочу добавить ссылку, которая перенаправляет на компонент на той же странице, но не на другую веб-страницу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...