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

Question

几天来我一直在尝试解决这个问题，但仍然无法正常工作。重定向如何在这里不起作用？我不断收到“类型错误：历史未定义”。此外，单击按钮时，它保持不变 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>
    );
}

Answer 1

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

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

Answer 2

如果你这样使用

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

在你的方法中这样做。

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

希望能解决您的问题。

Answer 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 使用。

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

React js: React router not redirecting when button is being clicked

javascript

router

reactjs

react-router