Я новичок в 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 по аналогичной проблеме говорят о ссылках на другую страницу, которую я запуталась. Я хочу добавить ссылку, которая перенаправляет на компонент на той же странице, но не на другую веб-страницу.