Ответ 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. Пожалуйста, отправьте другой вопрос, если вы хотите знать, как это сделать.