Как перемещаться с одной страницы на другую в ответ js?

У меня есть два компонента. В первом компоненте у меня есть одна кнопка. При нажатии кнопки я хочу перейти к другому компоненту или другой странице.

вот мой код http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component {
    handleClick(){
      alert('---');
    }

    render() {
        return <button onClick={this.handleClick}>hello</button>
    }
}

class Second extends React.Component {
    render() {
        return <label>second component</label>
    }
}

React.render( <App /> , document.getElementById('app'))

ОТВЕТЫ

Ответ 1

Здесь есть два подхода, оба довольно простые.

Подход 1. Использование React Router

Убедитесь, что у вас уже есть маршрут в вашем проекте. Он должен содержать эту информацию как минимум: путь и компонент. Это должно быть определено примерно так:

import YourComponent from "./path/of/your/component"; 

<Route path="/insert/your/path/here" component={YourComponent} />

Затем вы хотите обновить функцию handleClick, чтобы использовать Link из react-router-dom (возможно, придется установить этот пакет, если у вас его еще нет, используя npm i react-router-dom).

Удалите это (ваша функция handleClick вам не нужна с Link):

handleClick(){
  alert('---');
}
    render() {
        return <button onClick={this.handleClick}>hello</button>
    }

}

Теперь измените ваш метод рендеринга следующим образом:

    render() {
        return (
          <div>
            <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
         </div>
       ); 
    }

}

Присвойте Link то же имя класса, что и вашей кнопке, чтобы она называлась кнопкой, а не тегом привязки.

Собираем все вместе.

//Где бы ни находился ваш роутер с вашими маршрутами

    import YourComponent from "./path/of/your/component";

    <Router>
      <Route exact path="/insert/your/path/here" component={YourComponent} />
    </Router>

//Компонент с функцией handleClick

import { Link } from "react-router-dom"; 

class App extends Component {
  render() {
     return(
       <div>
         <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
      </div>
     );
  }
}

Подход 2: Использование window.open

Тем не менее убедитесь, что у вас настроен маршрут, как указано выше. Разница в том, что вы не будете использовать Link, что означает, что вам понадобится ваша функция handleClick. Это будет единственное, что изменится.

Изменить это:

handleClick(){
  alert('---');
}

на это:

handleClick(){
  window.open("/insert/your/path/here");
  //this opens in a new tab (believe that is what the owner of the question wanted if not you can do window.location.href = "/insert/your/path/here". 
}

Вот оно. Если вы хотите сделать ваши пути динамическими, то есть они включают переменные, такие как id или имена и т.д. См. ниже.

Динамические пути

Динамические пути могут включать имена и идентификаторы или любую другую переменную, которую вы хотите. Сначала вы должны скорректировать свой маршрут, а затем соответственно изменить ссылку или местоположение.

Измените маршрут на этот:

<Route path="/insert/your/path/here/:name" component={YourComponent} />

Обратите внимание на двоеточие (:), это позволяет вам вставить строку через переменную.

Обновите свою ссылку на это:

<Link to={'/insert/your/path/here/${variableName}'}>hello</Link>

А если вы используете window.open, обновите его так:

window.open('/insert/your/path/here/${variableName}');

Несколько вещей, на которые стоит обратить внимание. Вы используете скобки после знака равенства, потому что это говорит React, эй, мне нужно здесь ввести переменную. Далее обратите внимание, что галочки в обратном порядке "это говорит React, что вы используете строковый литерал, что означает: эй, я хочу, чтобы вы интерпретировали это как строку, но сначала получите значение моей переменной здесь и превратите в строку для меня". А $ {} позволяет вам разместить переменную, чтобы React мог правильно ее интерпретировать. Таким образом, все вместе, реакция читает эту строку как: "привести пользователя к пути"/insert/your/path/here/valueOfVariablName ", а затем React проверяет маршруты для этого пути и говорит, что у нас есть что-то, что"/insert/your/path/здесь/: имя "так: имя должно равняться значениюOfVariableName. Надеюсь, что это имеет смысл. Вы можете проверить динамический путь в вашей консоли. Зарегистрируй свой реквизит. Вы должны увидеть объект, который содержит местоположение, историю и т.д.

Вы также можете узнать больше о React-Router здесь. Необработанная ссылка: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Если у кого есть лучший ресурс. Пожалуйста, не стесняйтесь редактировать мой ответ или оставить комментарий к нему.

Надеюсь, это поможет любому, кто сталкивается с этим вопросом. Кстати, вы также можете передать состояние через Link. Пожалуйста, отправьте другой вопрос, если вы хотите знать, как это сделать.

Ответ 2

Если вы хотите создать одно приложение, я бы предложил использовать React Router. В противном случае вы можете просто использовать простой Javascript:

window.location = 'newUrl';

Ответ 4

Мы используем Link для навигации по разным маршрутам, которые размещаются или маршрутизируются реагирующим маршрутизатором.

class App extends React.Component {
    render(){
        return (
            <div>
                <BrowserRouter>
                    <div>
                    <Route path="/"  component={Landing} exact />
                    <Route path="/surveys" component={Dashboard}/>
                    </div>
                </BrowserRouter>

            </div>
        )
    }
}

для этих двух компонентов выше вы можете использовать ссылку.

<Link to="/surveys">go to my surveys</Link>

Однако якорные теги используются для перехода к совершенно другим HTML-документам. например, для Google oauth, если вы хотите войти в систему пользователя, вы должны перейти к другому URL-адресу, когда пользователь нажимает кнопку "Войти с помощью Google".

<a href="/auth/google">Login with Google</a>