組件未使用 react-router-dom 渲染

Question

我正在嘗試在不同的路線上導航和顯示不同的組件。 所以我的 index.js 看起來像這樣

ReactDOM.render(<Routes />, document.getElementById('root'));

然后我的 Routes 組件的渲染功能就像

  render() {
    return (
      <BrowserRouter>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route exact path="/admin/add-product" component={AdminAddProduct}/>
          </Switch>
        </BrowserRouter>
    );
  }

所以我有導航欄組件，點擊我已經定義了動作

render() {
  return (
    <Router>
       <MDBNavbar color="default-color" dark expand="md">
      <MDBNavbarToggler onClick={this.toggleCollapse} />
      <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
        <MDBNavbarNav left>
          <MDBNavItem>
            <MDBNavLink to="/">Shop</MDBNavLink>
          </MDBNavItem>

          <MDBNavItem>
            <MDBNavLink to="/admin/add-product">Admin product</MDBNavLink>
          </MDBNavItem>
        </MDBNavbarNav>
      </MDBCollapse>
    </MDBNavbar>
    </Router>
    );
  }
}

所以最初當我在“/”時，我看到的是我在 routes.js 文件中定義的主頁組件，但是當我點擊管理產品時，路由轉到 /admin/add-product 但隨后組件未呈現屏幕

如果我刷新頁面並停留在該路線上，那么只有我才能看到 AdminAddProduct 頁面的內容。

Answer 1

沒有看到您的應用程序的整個結構，我不知道這是否是一個好建議。 我假設您還有一個 app.js 文件。

你的 index.js 文件中需要 app.js 並且它應該被封裝在 Router 中。

您的 index.js 文件應如下所示：

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

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById('root')
);

請注意，在此示例中， BrowserRouter在 index.js 中，而不是在 Routes 組件中。

另外，請確保您的 Routes 組件已導入 App.js 或直接在 App.js 中編寫此邏輯。

 <Switch>
   <Route exact path="/" component={HomePage} />
   <Route exact path="/admin/add-product" component={AdminAddProduct}/>
 </Switch>

Answer 2

這可能是沖突問題，具體取決於您的 react-router-dom 和 mdbootstrap 版本，因為 react-router-dom 5.0.0v 版與 MDBNavLink 組件存在沖突，但 react-router-dom 5.0.1v 版已解決此問題嘗試將 react-router-dom 版本升級到最新版本

npm i react-router-dom@latest