React 和 antd：路由器不重新渲染組件

Question

我有一個帶有登錄和搜索頁面的簡單 web 頁面。 我在頂部還有一個導航欄，可以在兩者之間切換。 基本的App.js如下所示：

const history = createBrowserHistory();

function App() {
    return (
        <Router history={history}>
            <CustomLayout>
                <Switch>
                    <BaseRouter/>
                </Switch>
            </CustomLayout>
        </Router>
    );
}

export default App;

現在， BaseRouter和CustomLayout只是

const BaseRouter = () => (
    <div>
        <Route exact path={"/list"} component={ItemsList}/>
        <Route path={"/login"} component={LoginForm}/>
    </div>
);

export default BaseRouter;

和

const CustomLayout = ({children}) => {
    return(
        <>
        <Navbar/>
        {children}
        </>
    );
}

export default CustomLayout;

現在，導航欄看起來像這樣

import React from "react";
import {Menu} from 'antd';
import {Link} from "react-router-dom";

 const Navbar = () => {
    return (
        <div>
            <Menu mode="horizontal" theme={"dark"}>
                <Menu.Item key="list">
                    <Link to={"/list"}>List</Link>
                </Menu.Item>
                <Menu.Item key={"login"}>
                    <Link to={"/login"}>Sign in</Link>
                </Menu.Item>
            </Menu>
        </div>
    );
}

export default Navbar

讓我們保持組件簡單：

const Login = () => {
    return (
        <div>
            login
        </div>
    );
}

export default Login

const List = () => {
    return (
        <div>
            list
        </div>
    );
}

export default List

現在的問題是，當我單擊導航欄中的鏈接時，即使路由發生變化，React 也不會重新渲染組件。 我已經在 SO 上看到了數百個答案，但我仍然無法弄清楚。
筆記
避免刷新或重新加載頁面對我來說很重要。
編輯
奇怪的是，當我將Router更改為BrowserRotuer時它工作正常，但我不能使用我自己的歷史記錄。

Answer 1

你為什么不使用來自react-router-dom BrowserRouter的 BrowserRouter。

• App.js :- 使用來自react-router-dom BrowserRouter

import { BrowserRouter as Router, Switch } from 'react-router-dom'

function App() {
  return (
    <Router>
      <CustomLayout>
        <Switch>
          <BaseRouter/>
        </Switch>
      </CustomLayout>
    </Router>
  );
}

export default App;

• BaseRouter.js :- 從react-router-dom導入Route

import { Route } from 'react-router-dom'

const BaseRouter = () => (
  <div>
    <Route exact path="/list" component={ItemsList}/>
    <Route path="/login" component={LoginForm}/>
  </div>
);

export default BaseRouter;

• Navbar.js :-

import React from "react";
import {Menu} from 'antd';
import {Link} from "react-router-dom";

const Navbar = () => {
  return (
    <div>
      <Menu mode="horizontal" theme={"dark"}>
        <Menu.Item key={"list"}>
          <Link to="/list">List</Link>
        </Menu.Item>
        <Menu.Item key={"login"}>
          <Link to="/login">Sign in</Link>
        </Menu.Item>
      </Menu>
    </div>
  );
}

export default Navbar

那么如果你想使用history ：-

import { useHistory } from 'react-router-dom'

const testFunctionComponent = () => {
  const history = useHistory()
  
  const handleClick = (urlPath) => {
    // you can do
    history.push(urlPath) // to go anywhere 
  }

  return (
    <>
      <button onClick={() => handleClick('/anypath')}>Click Me!<button>
    </>
  )
}

Answer 2

從此更改您的BaseRouter ：

const BaseRouter = () => (
    <div>
        <Route exact path={"/list"} component={ItemsList}/>
        <Route path={"/login"} component={LoginForm}/>
    </div>
);

export default BaseRouter;

對此：

const BaseRouter = () => (
    <div>
        <Route exact path="/list" component={ItemsList}/>
        <Route path="/login" component={LoginForm}/>
    </div>
);

export default BaseRouter;

Answer 3

我相信你不能把 div 放在 switch 里面。 您沒有將 Route 組件暴露給 switch 語句。

因此，您的 url 發生變化，因為您的 Navbar 使其發生變化，但您的開關不知道該怎么做。

嘗試將您的基本路由器更改為此：

const history = createBrowserHistory();

function App() {
    return (
        <Router history={history}>
            <CustomLayout>

                    <BaseRouter/>

            </CustomLayout>
        </Router>
    );
}

export default App;

const BaseRouter = () => (
    <Switch>
        <Route exact path={"/list"} component={ItemsList}/>
        <Route path={"/login"} component={LoginForm}/>
    </Switch>
);

export default BaseRouter;

Answer 4

Router是低級的，希望你來管理事情。 BrowserRouter已經與 HTML5 歷史記錄同步。 如果你想要Router ，我認為你必須自己管理同步（例如<Link onClick={() => history.push(href)}>)或聽歷史變化檢測。 請參閱使用 react-router 檢測路由更改