文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >React标记更改url，但不呈现组件

问React标记更改url，但不呈现组件
EN

Stack Overflow用户
提问于 2022-02-02 13:11:22
回答 2查看 559关注 0票数 4

我试图构建一个带有react前端的应用程序，我有一个带搜索框的导航栏，当我单击搜索结果时，我想重定向到一个特定的url，我使用了环绕在结果组件周围的Link标记，但是当我单击结果组件时，url会改变，但是组件不会被重新呈现。我无法路由时，只有当我使用链接在我的肚脐内，在其他组件链接工作的预期。这是我的App.js

代码语言：javascript
运行
复制
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Entity from './components/Entity';
import Navbar from './components/Navbar';
import Video from './components/Video';
import AddEntity from './components/AddEntity';
import AddEpisode from './components/AddEpisode';

function App() {
  return (
    <Router>
        <div className="App bg-gradient-to-r from-slate-900 to-slate-700 h-full w-full">
          <Navbar />
          <Routes>
            <Route exact path="/entity/:id" element={<Entity />} />
              <Route exact path="/admin/entity/add" element={<AddEntity />} />
              <Route exact path="/admin/entity/:id/addEpisode" element={<AddEpisode />}/>
              <Route exact path="/entity/:id/:episode" element={<Video />} />
          </Routes>
        </div>
    </Router>
  );
}

export default App;

这是我的Navbar.js

代码语言：javascript
运行
复制
import axios from "axios"
import { Link, useNavigate } from "react-router-dom"
import { useEffect, useState } from "react/cjs/react.development"
import config from './../config'          
                                                                                              
const Navbar = () => {
  const navigate = useNavigate()
  const [text,setText] = useState("")  
  const onInputChange = (ev) => {
    setText(ev.target.value)
  }
  const [searchResults, setSearchResults] = useState([])
  const [resComps, setResComps] = useState([])
  useEffect(() => {
    if(text == ""){
      return
    }
    const data = {
      "search_text": text
    }
    axios.post(`${config.EntityServer}/entity/search`,data).then((res) => {
      let daxa = res.data.data
      if(daxa.hits.hits){
        const neededArr = daxa.hits.hits.map((hit) => {
          return{
            id: hit._id,
            cover_url: hit._source.cover_url,
            english: hit._source.english,
            japanese: hit._source.japanese,
            views: hit._source.views,
            mongo_id: hit._source.mongo_id
          }
        })
        console.log(neededArr)
        setSearchResults(neededArr)
      }
    })
  },[text, setSearchResults])

  const onDivClick = (ev) => {
    let ele = ev.target
    while(ele.getAttribute('id') === null) {
      ele = ele.parentNode
    }
    const id = ele.getAttribute('id')
    let current = window.location.href.split("/")
    console.log(current)
    const url = current[0] + '//' + current[2] + `/entity/${id}`
    window.location.assign(url)
  }

  useEffect(() => {
    if(!searchResults){
      return
    }
    const arr = searchResults.map(s => {
      return(
        <Link to={`/entity/${s.mongo_id}`}>
        <div className="flex flex-row mt-3 hover:bg-gray-700 hover:cursor-pointer" key={s.mongo_id} id={s.mongo_id}>
          <div className="flex-1 w-full h-5/6">
            <img className="object-cover border-2 border-cyan-500" src={`${config.ImageServer}/image/${s.cover_url}`} alt={s.mongo_id} />
          </div>
          <div className="flex-2 w-5/6 h-full">
            <p className="text-xl text-violet-500 ml-2">{s.english}</p>
            <p className="text-md text-violet-500 ml-2">{s.japanese}</p>
          </div>
        </div>
        </Link>
      )
    })
    setResComps(arr)
  },[searchResults, setResComps])

return (
<div className="w-full">
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800 fixed top-0 left-0 w-full max-h-15">
  <div className="container flex flex-wrap justify-between items-center mx-auto">
  <a href="#" className="flex">
    <svg className="mr-3 h-10" viewBox="0 0 52 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.87695 53H28.7791C41.5357 53 51.877 42.7025 51.877 30H24.9748C12.2182 30 1.87695 40.2975 1.87695 53Z" fill="#76A9FA"/><path d="M0.000409561 32.1646L0.000409561 66.4111C12.8618 66.4111 23.2881 55.9849 23.2881 43.1235L23.2881 8.87689C10.9966 8.98066 1.39567 19.5573 0.000409561 32.1646Z" fill="#A4CAFE"/><path d="M50.877 5H23.9748C11.2182 5 0.876953 15.2975 0.876953 28H27.7791C40.5357 28 50.877 17.7025 50.877 5Z" fill="#1C64F2"/></svg>
      <span className="self-center text-lg font-semibold whitespace-nowrap dark:text-white">FlowBite</span>
  </a>
  <div className="flex md:order-2">
  <div className="flex justify-center mr-12">
  <div className="xl:w-80">
    <div className="input-group relative flex flex-wrap items-stretch w-full">
      <input type="search" className="form-control relative flex-auto min-w-0 block w-3/6 px-3 py-1.5 text-base font-normal text-violet-500 bg-gray-700 bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:border-cyan-500 focus:outline-none" value={text} onChange={onInputChange} placeholder="Search" aria-label="Search" aria-describedby="button-addon2" />
    </div>
  </div>
</div>
      <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get Started</button>
      <button data-collapse-toggle="mobile-menu-4" type="button" className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">
      <span className="sr-only">Open main menu</span>
      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd"></path></svg>
      <svg className="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
    </button>
  </div>
  <div className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="mobile-menu-4">
    <ul className="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
      <li>
        <a href="#" className="block py-2 pr-4 pl-3 mr-8 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
      </li>
      <li>
        <a href="#" className="block py-2 pr-4 pl-3 mr-8 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
      </li>
    </ul>
  </div>
  </div>
</nav>
<div className="fixed right-[18%] top-14 bg-gray-800 w-80">
  <ul>
  <li>{(resComps && resComps.length > 0)? <div className="max-h-60 overflow-y-scroll scrollbar-hide border-2 border-t-0 border-gray-900">{resComps}</div>: <div></div>}</li>
  </ul>
</div>
</div>
)
}

useNavigate也不起作用。这是Entity.js，这是usenavigate工作的地方。

代码语言：javascript
运行
复制
import axios from "axios"
import { useEffect, useRef, useState } from "react"
import { useNavigate, useParams } from "react-router-dom"
import config from "../config"
const Entity = () => {
    const {id} = useParams()
    const navigate = useNavigate()
    const [entity, setEntity] = useState({})
    const [comps, setComps] = useState([])
    const firstUpdate = useRef(true)
    const onButtonClick = (ev) => {
        const target = ev.target
        navigate(target.getAttribute('url'))
    }
    
    useEffect(() => {
        axios.get(`${config.EntityServer}/entity/${id}`).then((d) => {
            const data = d.data
            if(data.result){
                setEntity(data.data)
            }
        }).catch(err => {
            console.log(err)
        })
    },[])

    useEffect(() => {
        if(firstUpdate.current) {
            firstUpdate.current = false
            return
        }
        const cps = entity.episodes.map((epi, index) => {
            return(
                <button className="rounded-full w-28 h-10 shadow-lg shadow-cyan-500/50 bg-cyan-500 text-white font-bold text-lg hover:shadow-cyan-500/90" url={`/entity/${entity.id}/${index+1}`} key={index} onClick={onButtonClick}>
                    {epi.title}
                </button>
            )
        })
        setComps(cps)
    },[entity])

    return(
        <div className="entity h-screen w-fit">
            <div className="flex flex-col w-full sm:flex-row">
                <div className="flex-1">
                    {(entity.cover_url) ? <img className="lg:w-2/5 md:h-full md:w-2/3 h-3/5 w-4/5 border-4 hover:border-8 border-cyan-500 object-cover mx-auto mt-40 shadow-lg shadow-cyan-500/50 hover:shadow-cyan-500/90" src={`${config.ImageServer}/image/${entity.cover_url}`}/>:<div></div> }
                </div>
                <div className="flex-1 flex h-80 flex-col sm:mt-40 mt-20 sm:mx-auto mx-5">
                    <p className="flex-1 lg:text-5xl md:text-4xl sm:text-3xl font-jetbrains font-bold tracking-wide uppercase text-center text-xl text-gray-400 mr-5">{entity.title}</p>
                    <p className="flex-1 lg:text-2xl md:text-xl sm:text-lg text-base font-jetbrains text-gray-300 mr-5 mt-10">{entity.description}</p>
                    <div className="ml-5 mt-10">
                    {comps}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Entity

会喜欢一些建议..。谢谢!

reactjs
javascript
html
css
EN

回答 2

Stack Overflow用户

发布于 2022-02-02 14:08:40

我尝试过调试代码，这里有太多不相关的代码，请提供一个最小的示例来复制bug。你可以在这里读到：https://stackoverflow.com/help/minimal-reproducible-example

但是，要更改URL，通过用户输入的输入，可以使用以下代码

代码语言：javascript
运行
复制
import { useState } from 'react'
import { Link } from "react-router-dom";

function App() {
  const [URL, setURL] = useState('#');
  const handleSearch = (event) => {
    setURL(event.target.value)
  }
  return (
    <div>
      <input onChange={handleSearch}></input>
      <Link to={URL}>click me!</Link>
    </div>
  );
}
export default App;
票数 5
EN

Stack Overflow用户

发布于 2022-08-05 17:41:00

我刚才遇到了同样的问题，这就是问题所在。

有两种反应成分：-

  1. BrowserRouter
  2. Routes

确保你的“链接”标签不在第二条，即“路线”内。

下面是我的一个例子

App.js

代码语言：javascript
运行
复制
import './App.css';
import Home from './Pages/Home';
import Rooms from './Pages/Rooms';
import Signing from './Pages/Signing';
import Dining from './Pages/Dining';
import Hotels from './Pages/Hotels';
import Navbar from './Component/Navbar'
import Footer from './Component/Footer'
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'
function App() {
    return (
<>
<Router>
  <Navbar/>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/dining/" element={<Dining/>}/>
<Route path="/signing/" element={<Signing/>}/>
<Route path="/rooms/" element={<Rooms/>}/>
<Route path="/hotels/" element={<Hotels/>}/>
</Routes>
</Router>
<Footer/>
</>
 );
}
export default App;

下面是Navbar组件Navbar.js

代码语言：javascript
运行
复制
import React, { Component } from "react";
import Video from '../Images/Video.mp4'
import Logo from '../Images/Logoto.png'
import { Link } from "react-router-dom";
import { Routes } from "react-router-dom";
import Home from '../Pages/Home'
import Dining from '../Pages/Dining'
import home from "../Pages/Home";
import { NavLink } from "react-router-dom";

export default class Navbar extends Component {

 render() {
   return (
 <>
<nav classname="nav1">
    <Link to="/" Component={Home}><span className="hotel">Our Hotels</span></Link>
    <Link to="/rooms/"><span className="rooms">Rooms</span></Link>
    <Link to="/"><span className="log"><img src={Logo} className="img1" alt="Logo"></img></span></Link>
    <Link to='/dining/'><span className="dining">Dining</span></Link>
    <Link to="/signing/"><span className="signing">Sign-in/Sign-up</span></Link>
    
</nav>
</>
)
}
}

我在Navbar中使用Link，Navbar在"BrowserRoute“标签中，但不在”路由“标签中

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70956249

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档