react-router-dom中表单默认值无法传递至Info页面的问题求助

你的代码存在几个关键问题导致表单信息无法正确传递到Info页面，下面是具体修正点和完整代码：

1. 修正props名称大小写错误 #

在Form.js中，你接收的props是onChange，但组件内写成了HandleChange（首字母大写），导致输入事件无法触发状态更新，需统一为小写的onChange。

2. 修正表单元素name与state key不匹配 #

第一个输入框的name="isim"与App组件中state的keyname不匹配，会导致输入名字时无法更新state，需改为name="name"。

3. 修正拼写错误 #

textarea的defaultValue={form.adsress}中adsress是拼写错误，应改为form.address。

4. 优化表单提交逻辑（可选但更规范） #

用Link包裹按钮跳转虽能生效，但更推荐使用表单submit事件配合useNavigate完成跳转，避免意外的表单默认提交行为。

修正后的完整代码 #

App.js

import React, { useState } from 'react'
import './App.css';
import { Route, Routes } from 'react-router-dom'
import Info from './Info';
import Form from './Form';

function App() {

  const [form, setForm] = useState({ name: "", city: "", birth: "", color: "", address: "" });

  const handleChange = (event) => {
    setForm({ ...form, [event.target.name]: event.target.value })
  }

  return (
    <div className="App">
      <h2>Enter your informations</h2>
      <Routes>
        <Route path="/" exact element={<Form form={form} onChange={handleChange}/>}></Route>
        <Route path="/info" element={<Info form={form}/>}></Route>
      </Routes>
    </div>
  );
}

export default App;

Form.js

import React from 'react'
import { useNavigate } from 'react-router-dom'

function Form({ form, onChange }) {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    navigate('/info'); // 跳转到Info页面
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" defaultValue={form.name} onChange={onChange} placeholder="Enter your name" />
        <select name="city" defaultValue={form.city} onChange={onChange}>
          <option value="">Enter your city</option>
          <option value="Ankara">Ankara</option>
          <option value="İstanbul">İstanbul</option>
          <option value="İzmir">İzmir</option>
        </select>
        <input type="date" name="birth" defaultValue={form.birth} onChange={onChange}  />
        <input type="color" name="color" defaultValue={form.color} onChange={onChange} />
        <textarea name="address" placeholder="Enter your address" cols="20" rows="5" defaultValue={form.address} onChange={onChange}></textarea>
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

export default Form

Info.js

import React from 'react'
import { Link} from 'react-router-dom'

function Info({form}) {
  return (
    <div>
      <p>Name: {form.name} </p>
      <p>City: {form.city}</p>
      <p>Birthday: {form.birth}</p>
      <p>Color: {form.color}</p>
      <p>Address: {form.address}</p>
      <Link to="/"><button>Back</button></Link>
    </div>
  )
}

export default Info

内容的提问来源于stack exchange，提问作者idil