React Routing Redirect onClick
Я пытался выполнить простое перенаправление на другой компонент при нажатии кнопки, но по какой-то причине это не работает. Я хочу перенаправить на '/ dashboard' и отобразить AdminServices из входа в систему следующим образом:
//index.js
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,
document.getElementById("root"));
//App.js
<Switch>
<Route path = "/" component = {Login} />
<Route path = "/dashboard" component = {AdminServices} />
</Switch>
//Login.js
<Button
onClick = {this.login}
>
</Button>
login = () =>{
<Redirect to = "/dashboard" />
}
//AdminServices.js
render(){
return(
<div>Test</div>
);
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Просто используйте NavLink вместо кнопки
import { NavLink } from 'react-router-dom'
<NavLink to = "/dashboard"> Dashboard </NavLink>
https://reacttraining.com/react-router/web/api/NavLink
привет @YashankVarshney, можешь использовать history.pushstackoverflow.com/a/45263164/4089357reacttraining.com/react-router/core/api/history
Конечно, я читал в Интернете, что переадресация или создание ссылок предпочтительнее, чем push? В любом случае я попытался установить NavLink, и теперь он приводит меня к нужному URL-адресу, но по какой-то причине он все еще показывает тот же компонент, а не другой: /
хммм, не уверен, можете ли вы попробовать использовать exact в маршруте, т.е. <Route path = "/" exact component = {Login} />
nvm, я думаю, мне просто пришлось использовать «точный» путь, чтобы избавиться от другого компонента. Теперь работает нормально!
Вы можете выполнить маршрутизацию по функциям следующим образом
handleOnSubmit = () => {
this.props.history.push(`/dashboard`);
};
Надеюсь на эту помощь
Уже пробовал, но другой мой компонент все равно не отображается. Также Link делает это странным подчеркиванием, с которым мне придется иметь дело позже. Как я могу просто использовать функцию для перенаправления? :)
Я думаю это должно помочь
Компонент <Switch> отображает только первый совпадающий маршрут. Вам просто нужно поменять местами компоненты <Route> в корпусе <Switch> и использовать ответ @Adnan shah для выполнения функции перенаправления.
P.S реагировать на пример аутентификации маршрутизатора
Так стоит ли мне вообще избавиться от <Switch>? Вы были правы, говоря о маршрутизации только к первому компоненту .. Теперь, когда я пытаюсь перейти от '/ dashbaord' к '/ addservice', это не работает: / Удалить его полностью?
Это случилось со мной, когда я пропустил импорт компонента в файл route.js.
Вам необходимо ссылаться / импортировать файлы из компонента в файл маршрута.
Вместо использования props.history лучше использовать хук useHistory, как показано ниже:
import { useHistory } from 'react-router-dom'
const MyComponent = (props) => {
const history = useHistory();
handleOnSubmit = () => {
history.push(`/dashboard`);
};
};
Используйте тег
<a href = "/" />
Я специально хочу использовать кнопку, поскольку я использую материальный дизайн и его внутри карты. В этом случае будет идеально использовать кнопку.