使用导航功能不起作用（反应）

Question

我正在学习一个教程，一切都很顺利，直到我尝试通过搜索输入实现导航。例如，如果我在 http://localhost:3000/searched/profile。在搜索栏中输入 'names' 应该会转到 http://localhost:3000/searched/names。在教程中它是这样工作的，我相信我做了同样的事情，但它对我不起作用

下面首先是搜索栏及其输入的搜索组件

然后是完成路由的页面。我的浏览器路由器位于 App.js.

import styled from "styled-components"
import { FaSearch } from 'react-icons/fa'
import { useState } from 'react'
import {useNavigate} from 'react-router-dom'

function Search() {

  const [input, setInput] = useState('');
  const navigate = useNavigate();

  const submitHandler = (e) => {
    e.preventDefault();
    navigate('/searched/' + input) (I GUESS THIS IS WHAT IS NOT WORKING)
  };

  return (
    <FormStyle onSubmit={submitHandler}>
    <div>
    <FaSearch></FaSearch>
    <input onChange={(e) => setInput(e.target.value)} type="text" value={input}/>
    </div>
    <h1>{input}</h1>
    </FormStyle>
  )
}

const FormStyle = styled.div`
  margin: 0 20rem;

  div{
    width: 100%;
    position: relative;
  }
  input{
    border: none;
    background: linear-gradient(35deg, #494949, #313131);
    border-radius: 1rem;
    outline: none;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    color: white;
    width: 100%;
  }
  svg{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(100%, -50%);
    color: white;
  }
`

export default Search

页数

import Home from "./Home"
import { Route, Routes } from 'react-router-dom'
import Cuisine from "./Cuisine"
import Searched from "./Searched"


function Pages() {

  return (
    <Routes>
      <Route path='/' element={<Home/>} />
      <Route path='/cuisine/:type' element={<Cuisine/>} />
      <Route path='/searched/:search'  element={<Searched/>} />
    </Routes>
  )
}

export default Pages

Answer 1

FormStyle 组件是样式化的 div 元素而不是 form 元素，因此 onSubmit 处理程序在 div 上没有意义。要解决此问题，您应该使用 form 元素，以便表单提交按您预期的方式工作。

Search.js 示例：

import styled from "styled-components";
import { FaSearch } from "react-icons/fa";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

function Search() {
  const [input, setInput] = useState("");
  const navigate = useNavigate();

  const submitHandler = (e) => {
    e.preventDefault();
    navigate("/searched/" + input);
  };

  return (
    <FormStyle onSubmit={submitHandler}> // <-- (2) onSubmit works now
      <div>
        <FaSearch></FaSearch>
        <input
          onChange={(e) => setInput(e.target.value)}
          type="text"
          value={input}
        />
      </div>
      <h1>{input}</h1>
    </FormStyle>
  );
}

const FormStyle = styled.form` // <-- (1) switch to form element
  margin: 0 20rem;

  div {
    width: 100%;
    position: relative;
  }
  input {
    border: none;
    background: linear-gradient(35deg, #494949, #313131);
    border-radius: 1rem;
    outline: none;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    color: white;
    width: 100%;
  }
  svg {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(100%, -50%);
    color: white;
  }
`;

export default Search;

使用导航功能不起作用（反应）

Use Navigate function not working (React)

reactjs

react-router-dom