在做一個反應餐廳項目時出現一些錯誤

Question

RestaurantUpdate.js

import React, { Component } from 'react';

class RestaurantUpdate extends Component {
render() {
    console.warn(this.props.match.params.id);
    return (
        <div>
            <h1>Update</h1>

        </div>
    );
  }
}

export default RestaurantUpdate;

應用程序.js

import React from 'react';
import {
Navbar,
Nav,
Container
} from 'react-bootstrap';
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from 'react-router-dom'
import Home from "./components/Home"

import RestaurantSearch from "./components/RestaurantSearch"
import RestaurantCreate from "./components/RestaurantCreate"
import RestaurantList from "./components/RestaurantList"
import RestaurantUpdate from "./components/RestaurantUpdate"
import RestaurantDetail from "./components/RestaurantDetail"
function App() {
return (
<div className="App">
  <Router>
    <Navbar bg="dark" variant="dark">
      <Container>
         <Navbar.Brand href="#home"><img width="75px" height="55px" src="/brand.png" alt="Brand" /></Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto" >

            <Nav.Link href="#home" ><Link to="/" style={{ color: 'yellow', textDecoration: 'inherit' }}>Home</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/list" style={{ color: 'yellow', textDecoration: 'inherit' }}>List</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/create" style={{ color: 'yellow', textDecoration: 'inherit' }}>Create</Link></Nav.Link>
            <Nav.Link href="#link" ><Link to="/search" style={{ color: 'yellow', textDecoration: 'inherit' }}>Search</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/details" style={{ color: 'yellow', textDecoration: 'inherit' }}>Detail</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/update" style={{ color: 'yellow', textDecoration: 'inherit' }}>Update</Link></Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
    <Routes>
      <Route path="/list" element={<RestaurantList />} />
      <Route path="/create" element={<RestaurantCreate />} />
      <Route path="/search" element={<RestaurantSearch />} />
      <Route path="/update/:id" render={props => (
        <RestaurantUpdate {...props} />
      )} />
      <Route path="/details" element={<RestaurantDetail />} />
      <Route exact path="/" element={<Home />} />
    </Routes>
  </Router>
</div >
);
}

export default App;


<Route path="/update/:id" render={props => (<RestaurantUpdate {...props} />)}/>

我在控制台中遇到錯誤。 “位置“/update/1”的匹配葉路由沒有元素。這意味着默認情況下它將呈現一個空值，從而導致一個“空”頁面。”

我期待控制台中的所有參數和 ID。 更新也沒有顯示。 誰能告訴我錯誤。我猜由於更新版本存在語法問題。 但不確定。 我正在使用最新版本。 所以請告訴我錯誤在哪里。

Answer 1

您可能正在使用react-router-dom v6及更高版本，因為我在其他routes中看到了元素props 。 您的錯誤還說這里缺少元素

位置“/update/1”的匹配葉路由沒有元素

試試這個修改

<Route path="/update/:id" element={<RestaurantUpdate {...props} />} />

Answer 2

問題

path="/update/:id"路由沒有在element道具上呈現任何內容。 在react-router-dom@6中， Route組件 API 發生了顯着變化，不再有任何component或render和children道具，也不再有任何路由道具，即沒有location 、 match或history道具。 RestaurantUpdate組件未呈現，即使已呈現， this.props.match也是未定義的。

解決方案

在element prop 上渲染RestaurantUpdate組件並使用useParams掛鈎訪問id路徑參數。

<Routes>
  <Route path="/list" element={<RestaurantList />} />
  <Route path="/create" element={<RestaurantCreate />} />
  <Route path="/search" element={<RestaurantSearch />} />
  <Route path="/update/:id" element={<RestaurantUpdate />} />
  <Route path="/details" element={<RestaurantDetail />} />
  <Route exact path="/" element={<Home />} />
</Routes>

由於RestaurantUpdate是一個類組件，您需要將其轉換為 React 函數組件或創建自定義withRouter HOC 以將路徑參數作為道具注入。

轉換為函數組件

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';

const RestaurantUpdate = () => {
  const { id } = useParams();

  useEffect(() => {
    console.warn(id);
  }, [id]);

  return (
    <div>
      <h1>Update</h1>

    </div>
  );
};

export default RestaurantUpdate;

創建一個withRouter HOC

import { useParams, /* other hooks */ } from 'react-router-dom';

const withRouter = Component => props => {
  const params = useParams();
  // other hooks
  return (
    <Component
      {...props}
      {...{ params, /* other hook props */ }}
    />
  );
};

export default withRouter;

...

import React, { Component } from 'react';
import withRouter from '../path/to/withRouter';

class RestaurantUpdate extends Component {
  render() {
    console.warn(this.props.match.params.id);
    return (
      <div>
        <h1>Update</h1>

      </div>
    );
  }
}

export default withRouter(RestaurantUpdate);

Answer 3

...但是，如果您不想使用 React.FC，則可以在以下位置使用（作為快速解決方案）正則表達式： window.location.pathname.match(/\update\/(\d+)/)

"/update/123".match(/\update\/(\d+)/); // ['update/123', '123', index: 1, input: '/update/123', groups: undefined]