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。更新也沒有顯示。誰能告訴我錯誤。我猜由于更新版本存在語法問題。但不確定。我正在使用最新版本。所以請告訴我錯誤在哪里。

uj5u.com熱心網友回復：

您可能正在使用及以上，因為我在 other 中react-router-dom v6看到了元素。您的錯誤還說這里缺少元素propsroutes

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

試試這個修改

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

uj5u.com熱心網友回復：

問題

該path="/update/:id"路線未在element道具上呈現任何內容。在組件 API 中發生react-router-dom@6了Route顯著變化，不再有任何componentorrender和childrenfunction props，也不再有任何 route props，即 no location、match或historyprops。組件沒有被RestaurantUpdate渲染，即使它被渲染了，this.props.match也是未定義的。

解決方案

在prop上渲染RestaurantUpdate組件并使用鉤子訪問路徑引數。elementuseParamsid

<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 函陣列件或創建自定義withRouterHOC 以將路徑引數作為道具注入。

轉換為函陣列件

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;

創建一個withRouterHOC

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);

uj5u.com熱心網友回復：

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

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

標籤：javascript 反应 反应式 反应路由器dom 使成为

上一篇：將物件寫入現有json檔案并用'[]'包裝內容

下一篇：檢測帶有整數、字符和問號的字串