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

一        实现效果

二        实现代码

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