React js：单击按钮时React路由器不重定向答案

【问题标题】：React js: React router not redirecting when button is being clickedReact js：单击按钮时React路由器不重定向
【发布时间】：2021-05-15 05:39:53
【问题描述】：

我这几天一直在尝试解决这个问题，但仍然无法正常工作。重定向如何在这里不起作用？我不断收到“TypeError：历史未定义”。此外，当单击按钮时，它会保持在相同的 url。我做错了什么？

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;

编辑：实施了答案，但仍然遇到问题。建议1：将按钮放置在路由器内部：链接或按钮被点击的url切换，但点击按钮时链接的页面没有。

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>
);

}

建议二：所有链接和按钮的 url 开关，但页面永远不会加载。

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>
    );
}

【问题讨论】：

您正试图在 Router 的上下文之外使用历史记录。路由器必须移动到组件树的更高级别，或者useHistory 移动到更低的级别。
我相信你的onClick可能也需要更新为onClick={() => handleSub()}
@CWSites OP 的处理程序语法很好，添加另一个匿名函数没有任何作用。
@lawrence-witt gotcha - 过去我遇到过问题，如果不以这种方式使用它，它会在每次渲染时调用它。也许是我对它的工作原理缺乏了解。
@CWSites 如果他们输入了onClick={handleSub()} 这确实是一个常见错误。

标签： javascript reactjs react-router router

【解决方案1】：

仅仅是因为你在React Router Switch组件之外调用了useHistory钩子，这意味着你应该在所有Switch子组件中使用这个钩子，否则历史对象是未定义的。我认为最好的方法是将按钮移动到Home 组件，然后它就可以正常工作了。

希望这个回答对你有所帮助。

【讨论】：

这解决了问题！我将按钮移动到不同的组件，它工作！

【解决方案2】：

如果你这样使用它

<Button color='primary' onClick={handleSub('/about')}>Submit</Button>

并在你的方法中这样做。

    const handleSub = (path) => async (e) => {
    history.push(path)}

希望它能解决你的问题。

【讨论】：

【解决方案3】：

问题不在于按钮的位置，而在于最初提到的useHistory 的位置。历史钩子期待 Router 组件提供的上下文 - 如果您熟悉 useContext，这里完全相同。您必须在 Router 的子组件内调用 useHistory。

我将模拟一个index.js 文件来演示：

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const rootHtml = (
  <Router>
    <App />
  </Router>
);


ReactDOM.render(rootHtml, document.getElementById('root'));

删除App 组件中的原始路由器。现在这个顶级路由器在范围内拥有App 组件，并且可以为其提供历史上下文以供useHistory 使用。

【讨论】：