React实现简单的搜索跳转功能

红太狼 2024-02-05 21:03 12阅读 0赞

## 一 实现效果 ##

![31eead38d0b34459baa6b42991ece4f6.png][]

## 二 实现代码 ##

### 2.1 Search.js ###

import React from "react";
    import {useLocation, useNavigate} from "react-router-dom";
    
    function Search(){
        const location=useLocation();
        const searchParams=new URLSearchParams(location.search);
        const input=searchParams.get("input");
        return(
            <div>
                <h1>{input}</h1>
            </div>
        )
    }
    
    export default  Search

### 2.2 Searchtwo.js ###

import React, { useState } from 'react';
    import {Link, Outlet, useNavigate} from 'react-router-dom';
    function Searchtwo() {
        const [invalue,setinvalue]=useState('');
        const navigate=useNavigate();
        function handChange(event){
            setinvalue(event.target.value)
        }
        function handNavigate(){
            let destination = "";
            switch(invalue) {
                case "登录中心":
                    destination = "/login";
                    break;
                case "首页中心":
                    destination = "/home";
                    break;
                case "社交中心":
                    destination = "/social";
                    break;
                case "我的藏品":
                    destination = "/collection";
                    break;
                case "账号管理"   :
                    destination ="/my";
                    break;
                default:
                    destination = "/";
            }
            navigate(destination);
            setinvalue("");
        }
        const handKeyDown=(e)=>{
            if(e.key==='Enter'){
                handNavigate();
            }
        };
        return (
            <nav id="navbar">
                <ul>
                    <li><Link to="/login">登录中心</Link></li>
                    <li><Link to="/home">首页中心</Link></li>
                    <li><Link to="/social">社交中心</Link></li>
                    <li><Link to="/collection">我的藏品</Link></li>
                    <li><Link to="/my">账号管理</Link></li>
                    <li ><span className={"position"}>
                        <input type="search"  placeholder="搜索" value={invalue} onChange={handChange}
                               onKeyDown={handKeyDown} />
                        <span><button onClick={handNavigate}>搜索</button></span>
                    </span></li>
                </ul>
    
                <Outlet></Outlet>
            </nav>
        )
    }
    export default Searchtwo

### 2.3 Collection.js ###

function Collection(){
        return(
            <h1>我的藏品页面</h1>
        )
    }
    
    export default Collection

### 2.4 Erji.js ###

function Erji(){
        return(
            <h1>抱歉，该功能未开放</h1>
        )
    }
    
    export default  Erji

### 2.5 Home.js ###

function Home(){
        return(
            <h1>首页中心页面</h1>
        )
    }
    
    export default  Home

### 2.6 index.js ###

import React from 'react'
    import {Navigate} from "react-router-dom";
    import ReactDom from 'react-dom';
    import {BrowserRouter as Router, Link, Route, Routes} from "react-router-dom";
    import Login from "./Login";
    import Home from  "./Home";
    import Social from  "./Social";
    import  Collection from  "./Collection";
    import  My from "./My";
    import  Erji from "./Erji";
    import Search from "./Search";
    import Searchtwo from "./Searchtwo";
    function App(){
        return(
            <Router>
                <Routes>
                    <Route exact path="/" element={<Searchtwo/>}>
                        <Route path="/login" element={<Login/>}></Route>
                        <Route path="/home" element={<Home/>}></Route>
                        <Route path="/social" element={<Social/>}></Route>
                        <Route path="/collection" element={<Collection/>}></Route>
                        <Route path="/my" element={<My/>}></Route>
                        <Route path="/two" element={<Erji/>}></Route>
                        <Route path="/" element={<Navigate to={"/login"}/>}>登录</Route>
                        <Route path="/search" element={<Search/>}></Route>
                    </Route>
                </Routes>
            </Router>
        )
    }
    
    ReactDom.render(<App/>,document.getElementById('root'))

### 2.7 Social.js ###

function Social(){
        return(
            <h1>社交中心页面</h1>
        )
    }
    
    export default  Social

### 2.8 Login.js ###

import {useNavigate} from "react-router-dom";
    import React from "react";
    function Login(){
        const navigate=useNavigate()
        function handLogin(){
            navigate("/home",{replace:true})
        }
        return(
            <div id="Log">
                <h1>
                    <p>登录页面</p>
                    姓名：<input type={'text'} name={'姓名'} placeholder={"姓名"} /><br/>
                    密码：<input type={'password'} name={'密码'} placeholder={"密码"} /><br/>
                    邮箱:<input type={'email'} name={'邮箱'} placeholder={"邮箱"}/><br/>
                    <button onClick={handLogin}>登录</button>
                    <button>重置</button>
                </h1>
            </div>
        )
    }
    export default Login

### 2.9 My.js ###

function My(){
        return(
            <h1>账号管理页面</h1>
        )
    }
    
    export default  My

[31eead38d0b34459baa6b42991ece4f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d3bbcab96a8d48e2b3bfa08977d72045.png