Изменить веб-страницу в кнопке узла js

J, вы можете найти react-router-dom

В обобщенном виде вам потребуется следующее:

1. Импорт react-router-dom зависимостей
2. Создайте файл router.js, например:

import { Switch, Route, BrowserRouter } from 'react-router-dom'
import { components } from './YOUR_COMPONENTS_FOLDER'

const Router = () => (
  <main>
    <BrowserRouter>
      <Switch>
        <Route exact path = "/" component = {components.mainComponent} />
        <Route exact path = "/login" component = {components.loginComponent} />
        <Route component = {components.notFoundComponent} />
      </Switch>
    </BrowserRouter>
  </main>
)

export default Router

3. Добавьте этот router.js файл в свой App.jsx:

import Router from './router'

...
class component extends React.PureComponent {
  ...
  render() {
    ...
    return (
       ...
          <Router />
       ...
    )
  }
}

4. Как только вы добавите Router в файл App.jsx, удалите все ссылки на ваш старый код для главной страницы.
5. Чтобы открыть страницу, вы добавите это в свой компонент:

import { Link } from 'react-router-dom'

...
render () {
   <Link to = "/login">
      YOUR BUTTON or something else to be clicked
   </Link>
}

...

Вот несколько ссылок, которые могут вам помочь:

• https://reacttraining.com/react-router/web/guides/quick-start
• https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/

Следовательно, вы можете использовать реагирующий маршрутизатор, вы можете добавить еще один маршрут

Посмотрите на приведенную ниже ссылку примера для получения более подробной информации.

[CodePen]  https://codepen.io/dwarka/pen/PLEMWX