ReactJS/Django：如何将搜索字符串编码到按钮onClick实现精准URL跳转？

嘿，作为刚上手React和Django的新手，遇到这个搜索跳转问题太正常啦！我来帮你一步步搞定它～

首先咱们先处理React前端的跳转逻辑，核心就是获取用户输入的关键词，然后构造正确的URL跳转到Django的搜索页面：

React端实现代码 #

你可以创建一个搜索栏组件，用useState管理输入值，然后在点击搜索按钮（或者提交表单）时触发跳转：

import { useState } from 'react';

function SearchBar() {
  // 用state存用户输入的搜索关键词
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = (e) => {
    e.preventDefault(); // 阻止表单默认的刷新行为
    // 先判断关键词是否为空，避免无效跳转
    if (searchQuery.trim()) {
      // 构造目标URL，用encodeURIComponent处理特殊字符（比如空格、&）
      window.location.href = `http://127.0.0.1:8000/search/?q=${encodeURIComponent(searchQuery)}`;
    }
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="输入搜索关键词..."
      />
      <button type="submit">搜索</button>
    </form>
  );
}

export default SearchBar;

这里要注意encodeURIComponent的作用——它会把关键词里的特殊字符转成URL安全的格式，比如空格会变成%20，避免因为特殊字符导致URL解析出错。

Django端配套配置 #

接下来确保Django这边能正确接收和处理这个搜索请求：

1. 配置路由：在你的app的urls.py里添加搜索页面的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('search/', views.search_view, name='search'),
]

2. 编写视图函数：在views.py里创建处理搜索请求的视图，获取URL里的q参数：

from django.shortcuts import render

def search_view(request):
    # 从GET请求里获取q参数，默认是空字符串
    search_query = request.GET.get('q', '')
    # 这里可以添加你的搜索逻辑，比如从数据库查询匹配内容
    # 比如：results = YourModel.objects.filter(title__icontains=search_query)
    context = {
        'query': search_query,
        # 'results': results  # 如果有查询结果就传进去
    }
    return render(request, 'search.html', context)

3. 创建搜索页面模板：在templates文件夹里创建search.html，可以展示搜索关键词和结果：

<!DOCTYPE html>
<html>
<head>
    <title>搜索结果</title>
</head>
<body>
    <h1>搜索关键词：{{ query }}</h1>
    <!-- 这里可以遍历展示搜索结果 -->
    <!-- {% for result in results %}
        <div>{{ result.title }}</div>
    {% empty %}
        <p>没有找到匹配的结果</p>
    {% endfor %} -->
</body>
</html>

小提示 #

等你部署到生产环境时，别硬写http://127.0.0.1:8000啦！如果React和Django部署在同一域名下，直接用相对路径/search/?q=${...}就行，这样更灵活。

内容的提问来源于stack exchange，提问作者User1717