反應鏈接路由不重定向到url

我有這個serch.js檔案。當我搜索并單擊li搜索結果中的 時，我想重定向到<InnerDetail />但 URL 沒有更改或我沒有重定向到此頁面

但是如果我輸入localhost/detiled/8 重定向到的 URL，則手動輸入 <InnerDetail />id 為 8

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
const initialState = {
  idaddProducts: "",
};
const Searchclients = () => {
  const history = useHistory();
  const [showResults, setShowResults] = React.useState(true);

  const [poName, pnName] = React.useState(initialState);
  const [showSerch, setShowSerch] = React.useState([]);
  const [detail, setDetail] = useState(false);
  const [inputValue, setInputValue] = React.useState("");
  const [filteredSuggestions, setFilteredSuggestions] = React.useState([]);
  const [selectedSuggestion, setSelectedSuggestion] = React.useState(0);
  const [displaySuggestions, setDisplaySuggestions] = React.useState(false);
 
 

  const suggestions = [];
  showSerch.forEach(function (data) {
    suggestions.push(data);
  });
 

  const onChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
    setShowResults(false);



    const filteredSuggestions = suggestions.filter(
      (suggestion) =>
        suggestion.firstname
          .toString()
          .toLowerCase()
          .includes(value.toLowerCase()) ||
        suggestion.id.toString().toLowerCase().includes(value.toLowerCase())
    );

   

    setFilteredSuggestions(filteredSuggestions);
    setDisplaySuggestions(true);
  };

  const onSelectSuggestion = (index) => {
    setSelectedSuggestion(index);
    setInputValue(filteredSuggestions[index]);
    setFilteredSuggestions([]);
    setDisplaySuggestions(false);
  };

  const SuggestionsList = (props) => {
    // console.log(props);

    const {
      suggestions,
      inputValue,

      onSelectSuggestion,
      displaySuggestions,
      selectedSuggestion,
    } = props;

    if (inputValue && displaySuggestions) {
      if (suggestions.length > 0) {
        return (
          <ul className="suggestions-list" style={styles.ulstyle}>
            {suggestions.map((suggestion, index) => {
              // console.log(suggestions);
              const isSelected = selectedSuggestion === index;
              const classname = `suggestion ${isSelected ? "selected" : ""}`;
              return (
                <Link to={`/detiled/${suggestion.id}`}>     //this link dont work
                  <li
                    style={styles.listyle}
                    // onMouseOver={{ background: "yellow" }}
                    key={index}
                    className={classname}
                   
                  >
                    {suggestion.firstname}
                  </li>
                </Link>
              );
            })}
          </ul>
        );
      } else {
        return <div>No suggestions available...</div>;
      }
    }
    return <></>;
  };



  useEffect(() => {
    axios
      .get("all-doctors-list/")
      .then((res) => {
        const data = res.data;
        // pnName(data.data);

        //  var stringdata = data;
        setShowSerch(data);

        //console.log(stringdata);
      });
    //  setShowSerch(data);
  }, []);

  return (
    <>
      <div className="note-container" style={styles.card}>
        <div style={styles.inner}>
          <p style={{ textAlign: "left" }}>Search Doctors</p>
          <form className="search-form" style={{}}>
            {showResults ? (
              <FontAwesomeIcon
                style={{ marginRight: "-23px" }}
                icon={faSearch}
              />
            ) : null}
            <input
              onChange={onChange}
              value={inputValue}
              style={styles.input}
              type="Search"
            />

            <SuggestionsList
            
              inputValue={inputValue}
              selectedSuggestion={selectedSuggestion}
              onSelectSuggestion={onSelectSuggestion}
              displaySuggestions={displaySuggestions}
              suggestions={filteredSuggestions}
            />
          </form>
        </div>
      </div>
    </>
  );
};



export default Searchclients;

導航器.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import InnerDetail from "./client/doctor/components/innerto_detail.js";
class Navigator extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>

          <Route path="/detiled/:id">
              <InnerDetail />
          </Route>
</Switch>
        </div>
      </Router>
    );
  }
}

function Home() {
  return (
    <div style={{ paddingTop: "20%", textAlign: "center" }}>
      <h1>Home</h1>
    </div>
  );
}



export default Navigator;

當我將滑鼠懸停在<li>瀏覽器底部時，路徑顯示為當前

我認為問題出在這里我嘗試了另一個鏈接這里沒有任何作業

 <Link to={`/detiled/${suggestion.id}`}>     //this link dont work
                  <li
                    style={styles.listyle}
                    // onMouseOver={{ background: "yellow" }}
                    key={index}
                    className={classname}
                   
                  >
                    {suggestion.firstname}
                  </li>
                </Link>

我在流動代碼下嘗試了另一個鏈接，一個名為 hello 的按鈕，它起作用了，我認為問題是回傳

  <SuggestionsList
              inputValue={inputValue}
              selectedSuggestion={selectedSuggestion}
              onSelectSuggestion={onSelectSuggestion}
              displaySuggestions={displaySuggestions}
              suggestions={filteredSuggestions}
            />
          <Link
            to={{
              pathname: `/detiled/5`,
            }}
          >
            <button>hello</button>
          </Link>

uj5u.com熱心網友回復：

嘗試使用

<Route path="/detiled/:id" component={InnerDetail} />

代替

<Route path="/detiled/:id">
<InnerDetail />`

在 Navigator.js 中

和

Route exact path="/">
<Home />

您是否創建了任何 Home 組件，而不是在 Navigator.js 中匯入該組件

uj5u.com熱心網友回復：

<Link to={"/detiled/"  suggestion.id}><li>...</li></Link>

這對我有用

標籤：javascript 反应

上一篇：將帶有預定義引數的函式傳遞給React中的handleSubmit

下一篇：如何使用firebase中的兩個“ref”方法？