所以我正在嘗試制作一個應用程式，您可以在其中填寫調查然后轉到另一個頁面。我已經嘗試為此使用 React Router。我遵循了一個教程，但是當我嘗試使用 Route 渲染組件時，它似乎沒有渲染。沒有 Route 的組件似乎作業正常。

主應用：

import Intro from "./pages/intro.js"

function App() {
  return (
    <div className="App">
      <Intro/>
    </div>
  );
}

export default App;

帶有路由的組件：

import { Routes, useNavigate, Route, Router } from 'react-router-dom';
import B1 from "./B1.js"

function Intro() {
  const navigate = useNavigate();

  const navigateToB1 = () => {
    navigate('./B1.js');
  };

  return (       
    <form>
      <h1>Walcome!</h1>
      <p><b>plase enter your name:</b></p>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <input
        type="submit"
        id="sumbit"
        value="Submit"
        onClick={navigateToB1}
      />
    
      <Router>
        <Routes>
          <Route path="./B1.js" element={<B1 />} />
        </Routes>
      </Router>
    </form>
  );
}

export default Intro;

uj5u.com熱心網友回復：

問題

Intro組件不能使用鉤子，useNavigate因為它是渲染組件的組件，它提供了鉤子所需Router的路由背景關系。也錯誤地使用了缺少幾個必需道具的低級組件。useNavigateIntroRouter

路由器

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string; // <-- required!!
  navigationType?: NavigationType;
  navigator: Navigator;                 // <-- required!!
  static?: boolean;
}

更高級別的路由器 ( BrowserRouter, HashRouter, 等... ) 自己管理它。

該Intro組件還呈現一個form元素，并且不會阻止在提交表單時發生默認表單操作。不這樣做將導致重新加載頁面并重新安裝整個 React 應用程式。

解決方案

使用更高級別的路由器之一，并在 ReactTree 中將其渲染得比任何需要訪問其路由背景關系的組件更高。

例子：

應用程式

import { BroswerRouter } from "react-router-dom";
import Intro from "./pages/intro.js";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Intro />
      </BrowserRouter>
    </div>
  );
}

export default App;

介紹

洗掉路由器并onSubmit在處理程式中使用事件物件navigateToB1以防止提交表單。

import { Routes, useNavigate, Route } from 'react-router-dom';
import B1 from "./B1.js";

function Intro() {
  const navigate = useNavigate();

  const navigateToB1 = (e) => { // <-- consume onSubmit event object
    e.preventDefault();         // <-- prevent the default form action
    navigate('/B1.js');
  };

  return (       
    <form>
      <h1>Welcome!</h1>
      <p><b>Please enter your name:</b></p>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <input
        type="submit"
        id="submit"
        value="Submit"
        onClick={navigateToB1}
      />
    
      <Routes>
        <Route path="/B1.js" element={<B1 />} />
      </Routes> 
    </form>
  );
}

export default Intro;

uj5u.com熱心網友回復：

你也可以在 app.tsx 或 .js 檔案中宣告你的路由。但這通常取決于您，如果您想添加到當前路由，您可以在子組件中宣告您的路由。假設您的組件路由到“/Intro”，然后您將路由放入“Intro”組件以定向到“/form/B1.js”

react-router 還有一個新版本： 6. 注意不要看錯版本的檔案。關于使用路由器組件：https ://reactrouter.com/en/main/router-components/router 。BrowserRouter 可能會滿足您的需求

型別宣告是所有路由器組件（如 和 ）共享的低級介面。就 React 而言，它是一個背景關系提供者，為應用程式的其余部分提供路由資訊。

您可能永遠不需要手動渲染。相反，您應該根據您的環境使用更高級別的路由器之一。在給定的應用程式中，您只需要一個路由器。

該道具可用于使您的應用程式中的所有路由和鏈接相對于它們都共享的 URL 路徑名的“基本”部分。這在使用 React Router 僅渲染較大應用程式的一部分或當您的應用程式具有多個入口點時很有用。基本名稱不區分大小寫。

嘗試這個：

function Intro() {
  const navigate = useNavigate();

  const navigateToB1= () => 
  {
    navigate('./B1.js');
  };

    return ( 
    <>      
        <form>
            <h1>Walcome!</h1>
            <p><b>plase enter your name:</b></p>
            <label>
             Name:
            <input type="text" name="name" />
            </label>
            <input type="submit" id="sumbit" value="Submit" onClick={navigateToB1} />
    
       </form>
       <BrowserRouter>
           <Routes>
              <Route path="./B1.js" element={<B1/>} />
           </Routes>
    </BrowserRouter

  </>
  );
  }

  export default Intro;

標籤：javascript反应反应路由器成分反应路由器dom

上一篇：如何設定在輸入表單中輸入多少字母的范圍？

下一篇：如何使用Promisereactjs