在 reactjs 中設置具有歷史記錄的路由器

Question

我有 3 個組件，我想制作 2 個按鈕 HOME 和 ABOUT（單擊后將重定向到頁面對應的 HOME（路徑'/'）或 ABOUT（路徑'/about'）。組件 NOTFOUND 僅在路徑錯誤時顯示。但是當我嘗試單擊 HOME 或關於它始終顯示 NOTFOUND 盡管 url 已更改為“/”或“/about”。詳細代碼如下，我必須做些什么才能使其正常工作。TKS all

import React, { useState } from 'react';
import {Router, Route, Switch} from 'react-router-dom'
import {createBrowserHistory} from 'history'

const history = createBrowserHistory()

function Home(props) {
    return (
        <div>Home</div>
    )
}

function AboutUs(props) {
    return (
        <div>About US</div>
    );
}
function NotFound(props) {
    return (
        <div>NotFound</div>
    );
}

function RouterDom(props) {
    
    const [count, setCount] = useState(1)
    
  
    return (
        <div>
            <div>
                <button onClick={() => history.push('/')}>Home</button>
                <button onClick={() => history.push('/about')}>About</button>
            </div>
            <div>
                <div>Count: {count}</div>
                <button onClick={() => setCount(count + 1)}>Add</button>
            </div>
            <Router history={history}>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={AboutUs} />
                    <Route component={NotFound}/>
                </Switch>
            </Router>
        </div>
    );
}

export default RouterDom;

Answer 1

您應該使用反應路由器 dom 提供的鏈接而不是按鈕。

import {Link} from "react-router-dom";

<Link to="/">Home</Link>
<Link to="/about">About</Link>

您還應該將 path 屬性添加到 Route 標記：

<Route path="/about">
   <About />
</Route>