问题描述
我已经尝试解决这个问题几天了,但仍然无法让它工作.重定向如何在这里不起作用?我不断收到类型错误:历史未定义".此外,当按钮被点击时,它保持在相同的网址.我做错了什么?
从'react'导入React;从'./Nav'导入导航;从'./About'导入关于;从./Service"导入服务;从'./Home'导入首页;进口 {BrowserRouter 作为路由器,转变,路线,使用历史,来自'反应路由器-dom';功能应用(){const 历史 = useHistory();函数 handleSub() {//console.log('点击');history.push('/关于');}返回 (
<button onClick={handleSub}>提交</button><路由器><导航/><开关><Route path='/' 精确组件={Home}/><Route path='/about' component={About}/><Route path='/service' component={Service}/></开关></路由器>
);}导出默认应用程序;
实施了答案,但仍然遇到问题.建议1:把按钮放在路由器里面:链接的url切换或按钮被点击但链接的页面不是点击按钮时.
function App() {const 历史 = useHistory();函数 handleSub() {//console.log('点击');history.push(`/about`);}返回 (<路由器>
<导航/><button onClick={handleSub}>提交</button><开关><Route path='/' 精确组件={Home}/><Route path='/about' component={About}/><Route path='/service' component={Service}/></开关>
</路由器>);
}
建议二:所有链接和按钮的 url 切换,但页面永远不会加载.
function App() {const 历史 = useHistory();函数 handleSub() {//console.log('点击');history.push(`/about`);}返回 (<路由器>
<导航/><开关><button onClick={handleSub}>提交</button><Route path='/' 精确组件={Home}/><Route path='/about' component={About}/><Route path='/service' component={Service}/></开关>
</路由器>);}
只是因为你在 React Router Switch
组件之外调用了 useHistory
钩子,这意味着你应该使用这个在所有 Switch
子组件中挂钩,否则历史对象未定义.我认为最好的方法是将按钮移动到 Home
组件,然后它肯定会起作用.
希望这个回答对您有所帮助.
I have been trying to solve this problem for couple days and still couldnt get it to work. How does redirecting not work here? I keep getting the "TypeError: history is undefined". Also when the button is being clicked, it stays at the same url. What am I doing wrong?
import React from 'react';
import Nav from './Nav';
import About from './About';
import Service from './Service';
import Home from './Home';
import {
BrowserRouter as Router,
Switch,
Route,
useHistory,
} from 'react-router-dom';
function App() {
const history = useHistory();
function handleSub() {
// console.log('clicked');
history.push('/about');
}
return (
<div className='App'>
<button onClick={handleSub}>submit</button>
<Router>
<Nav />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/service' component={Service} />
</Switch>
</Router>
</div>
);
}
export default App;
Edit: implemented the answers and still having trouble.Suggestion 1: place the button inside the router: url switches for links or button is clicked but pages for the links not when the button is clicked.
function App() {
const history = useHistory();
function handleSub() {
// console.log('clicked');
history.push(`/about`);
}
return (
<Router>
<div className='App'>
<Nav />
<button onClick={handleSub}>submit</button>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/service' component={Service} />
</Switch>
</div>
</Router>
);
}
Suggestion number two: url swtich for all the links and button but the page never loads.
function App() {
const history = useHistory();
function handleSub() {
// console.log('clicked');
history.push(`/about`);
}
return (
<Router>
<div className='App'>
<Nav />
<Switch>
<button onClick={handleSub}>submit</button>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/service' component={Service} />
</Switch>
</div>
</Router>
);
}
Simply because you are calling useHistory
hook outside of React Router Switch
Component, meaning you should use this hook in all Switch
child components, otherwise the history object is undefined. The best way for my opinion is to move the button to the Home
Component, then surly it will work.
I hope this answer helped you.
这篇关于React js:单击按钮时React路由器不会重定向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!