為什么ReactRouter將我帶到正確的路徑，但不顯示相應的組件？

我正在使用 React 創建一個聯系人串列。對于這個特定的專案，我應該在不使用 Redux 的情況下創建它。

我正在嘗試使用 React Router 導航到子組件。當我這樣做時，它會將我帶到所需的 URL 路徑 ( http://localhost:3000/diplayed-list)，但組件本身沒有顯示在 UI 中，也沒有顯示在我的開發工具的組件部分中。

這是父組件：

import { Link, Routes, Route } from "react-router-dom";
import DisplayedList from "./DisplayedList";

const AddContact = () => {

  return (
    <form>
      <div className="form-group">
        <label htmlFor="full-name">Full Name:</label>
        <input type="text" className="form-control" id="full-name" />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input type="email" className="form-control" id="email" />
      </div>
      <div className="form-group">
        <label htmlFor="phone-number">Phone Number:</label>
        <input type="text" className="form-control" id="phone-number" />
      </div>
      <div className="form-group">
        <label htmlFor="image">Image:</label>
        <input type="text" className="form-control" id="image" />
      </div>
      <Link to="/diplayed-list">
        <button type="button" className="btn btn-secondary">Go Back</button>
      </Link>
      <Link to="/diplayed-list">
        <button type="submit" className="btn btn-primary">Submit</button>
      </Link>
      <Routes>
        <Route path="/diplayed-list" element={<DisplayedList />}></Route>
      </Routes>
    </form>
  )
}

export default AddContact;

這是子組件：

const DisplayedList = () => {
  return (
    <div>
      <p>Testing 1, 2, 3</p>
    </div>
  )
   
};

export default DisplayedList;

它從 App.js 傳遞到 AddContact.js 的一個組件層上正常作業：

import React from 'react';
import { 
  Routes, 
  Route, 
  Link } from 'react-router-dom';
import AddContact from './components/AddContact';

    const App = () => {
    
      return (
        <div className='container'>
          <div className='row'>
            <div className='col-12'>
              <h1>React Contact List</h1>
            </div>
          </div> 
          <div className='row'>
            <div className='col'>
              <Link to="/add-contact/*">
                <button id='add-contact-btn' className='btn btn-primary'>Add Contact</button>
              </Link>
            </div>
          </div>
          <Routes>
            <Route path="/add-contact/*" element={<AddContact />}></Route>
          </Routes>
        </div>
      )
    }
    
    export default App;

這是我的 package.json 中的依賴項，以防任何人都可以在那里發現任何問題。我曾經做過一次 npm i react-router-dom@latest --force。我不確定我是否在依賴項中搞砸了任何事情。

{
  "name": "contact-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.3",
    "react": "^18.1.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },

我不確定為什么它在第一個代碼示例中不起作用。

我確實嘗試將其中一個鏈接注釋掉"/displayed-list"，以確保必須鏈接到同一個地方不會干擾它。我仍然有同樣的問題。

我從關于類似問題的另一篇文章exact path=中看到，當您的路徑是簡單的path="/".

我將 index.js 更改為exact path=，但這似乎也沒有什么不同。這是代碼：

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route exact path="/*" element={ <App /> }>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

我嘗試"/displayed-list"在 AddContact.js 中制作一個exact path=，但這似乎也沒有解決它。

我也嘗試過component=代替element=，但這似乎也沒有什么不同。

誰能抓住我錯過的東西？

uj5u.com熱心網友回復：

嘗試這個：

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import AddContact from './components/AddContact';


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/">
           <Route index element={ <App /> }/>
           <Route path="add-contact" element={ <AddContact /> }/>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

洗掉 App.js 中的 Route，您的所有 Route 必須僅在一個 Routes 內（index.js 中的那個）。另請注意您必須如何宣告子路由

uj5u.com熱心網友回復：

除非我遺漏了什么，否則您似乎從未在 App.js 檔案中設定到該地址的路由。所有路由都應該設定在那里以正確路由。

我會嘗試移動

<Routes>
  <Route path="/diplayed-list" element={<DisplayedList />}></Route>
</Routes>

在 App.js 檔案中，您應該替換

<Routes>
   <Route path="/add-contact/*" element={<AddContact />}></Route>
</Routes>

和：

<Routes>
   <Route path="/add-contact/*" element={<AddContact />}></Route>
   <Route path="/diplayed-list" element={<DisplayedList />}></Route>
</Routes>

標籤：javascript 反应

上一篇：JavaScript，檢測承諾陣列中的承諾何時被解決，然后對其進行處理

下一篇：選擇“收音機”時更改div的背景顏色