React js：單擊按鈕時React路由器不重定向

Question

幾天來我一直在嘗試解決這個問題，但仍然無法正常工作。 重定向如何在這里不起作用？ 我不斷收到“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>
    );
}

Answer 1

僅僅因為你在React Router Switch組件之外調用useHistory鈎子，這意味着你應該在所有Switch子組件中使用這個鈎子，否則歷史 object 是未定義的。 我認為最好的方法是將按鈕移動到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組件中原有的路由器。 現在這個頂級路由器在 scope 中有App組件，並且可以為其提供歷史上下文供useHistory使用。