Как перенаправить на другую страницу по нажатию кнопки в Reactjs - PullRequest
Новая
       41

Как перенаправить на другую страницу по нажатию кнопки в Reactjs

0 голосов
/ 26 сентября 2019

Я хочу создать базовое веб-приложение с использованием реагирования.Я реализовал создание кнопок.Я хочу перенаправить на другую страницу по нажатию кнопки.Ниже приведен мой код App.js 

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        <p>
          <buttontoolbar>
            <button const path = '/Components'> Click Me </button>
          </buttontoolbar>
        </p>
     </header>
    </div>

  );
}

export default App;

Когда я нажимаю кнопку «Нажми меня», он должен перенаправиться на Components.js.Ниже приведен код для Components.js 

import React from "react"

function app(){
 return(
  <p>
  Welcome to the world. 
  </p>
 )
}

export default app

Давным-давно я сделал это король вещей в ASP.NET.там я использовал Response.redirect для перенаправления страниц, что так просто.Поскольку я новичок в React, я ничего не знаю об этом.Есть ли что-то подобное в React?

Ответы [ 3 ]

0 голосов
/ 26 сентября 2019

В основном React не имеет «страниц».Идея состоит в том, чтобы «показывать» или «скрывать» компоненты, это дает пользователю представление о странице / просмотре.

Самый простой способ добиться маршрутизации в React - это использовать декларативную библиотеку маршрутизатора, такую ​​как реагироватьrouter специально для более сложных приложений.

Вот пример без реагирующего маршрутизатора, чтобы понять основную концепцию: 

const ViewOne = ({onClick}) => (
  <div>
    View 1 <br />
    <button onClick={() => onClick("view2")}>Go to view 2</button>
  </div>
);

const ViewTwo = ({onClick}) => (
  <div>
    View 2 <br />
    <button onClick={() => onClick("view1")}>Go to view 1</button>
  </div>
);



const App = () => {
  
  const [currentView, setCurrentView] = React.useState("view1");
  
  return (
      <div>
        {
          currentView === "view1" ? 
          <ViewOne onClick={page => setCurrentView(page)} /> : 
          <ViewTwo onClick={page => setCurrentView(page)} />
       }
      </div>
  );
};

const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);
<div id="my-app"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
0 голосов
/ 26 сентября 2019

попробуйте Link компонент react-router-dom и передайте to в качестве пути к нему, куда вы хотите перенаправить onClick. 

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

и, например, 

<Link to={'/Components'}>
  <button > Click Me </button>
</Link>


const {Link, BrowserRouter} = window.ReactRouterDOM
function App(){
  return (
  <BrowserRouter>
      <button><Link to='/abc' target='_blank'> Click Me  </Link></button>
   
    </BrowserRouter>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<body><div id="root"></div></body>
0 голосов
/ 26 сентября 2019

Используйте пакет реагирующий маршрутизатор-дом для определения маршрутизации , а затем используйте один из указанных ниже способов при событии onClick кнопки.

  1. this.props.history.push("componentpath").
  2. объект browserHistory (в пакете реагирующий маршрутизатор ).

Пожалуйста, укажите это Ссылка

...