React Router v6路由匹配失败：点击跳转报错，地址栏输入正常

问题重现 #

• 在首页输入URL后点击跳转按钮，页面提示错误：No routes matched location ./designer/"url"
• 直接在浏览器地址栏输入/designer/xxx格式的路径，却能正常跳转到设计页并完成渲染

核心原因分析 #

1. Link路径未使用绝对路径+URL参数未编码
   Home组件中Link的to属性使用相对路径写法，且直接将用户输入的URL拼接进路径，未做编码处理：

   <Link className="btn btn-primary btn-sm" to={`designer/${url}`}>navigate</Link>
   

   当用户输入的URL包含特殊字符（如引号、斜杠、问号等），会生成不符合路由规则的路径（比如./designer/"url"），导致路由匹配失败。同时相对路径在部分场景下可能与当前路由叠加，引发路径逻辑错误。

2. 空参数触发无效路由
   当用户未输入任何内容直接点击跳转时，路径会变成/designer/，而路由定义的designer/:url要求必须存在url参数，此时无法匹配路由规则。

3. 额外关联问题

   • TemplateSelector中直接同步调用getTemplates(url)获取异步数据，不符合React钩子的异步处理规范，会导致数据未返回时data.Templates触发报错
   • Designer组件中错误使用{parameters}，未从props中取值，应该改为{props.parameters}

解决方案 #

1. 修复Link路径与参数编码 #

将Link的to改为绝对路径，并对用户输入的URL进行编码，避免特殊字符破坏路由结构：

<Link className="btn btn-primary btn-sm" to={`/designer/${encodeURIComponent(url)}`}>
  navigate
</Link>

在TemplateSelector中解码参数，还原原始URL：

const {url} = useParams();
const decodedUrl = decodeURIComponent(url);
const data = getTemplates(decodedUrl);

2. 处理空参数场景 #

在Home组件中添加跳转前的校验，禁止空URL触发无效跳转：

// 替换原Link为按钮+编程式导航
import { useNavigate } from "react-router-dom";

function Home() {
  const [url, setURL] = useState('');
  const navigate = useNavigate();

  const handleNavigate = () => {
    if (url.trim()) {
      navigate(`/designer/${encodeURIComponent(url)}`);
    }
  };

  return (
    <div className="py-5 container">
      <Form>
        <Form.Group className="mb-3" controlId="exampleForm.ControlInput1" value={url}
          onChange={(e) => setURL(e.target.value)}>
          <Form.Label>URL</Form.Label>
          <Form.Control type="text" placeholder="example.com" />
        </Form.Group>
      </Form>
      <button className="btn btn-primary btn-sm" onClick={handleNavigate}>
        navigate
      </button>
    </div>
  );
}

3. 修复自定义钩子与子组件参数问题 #

• 调整getTemplates钩子为异步状态管理模式：

  // 示例getTemplates钩子实现
  import { useState, useEffect } from "react";
  
  function getTemplates(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
  
    useEffect(() => {
      if (!url) return;
      fetch(`你的API地址?url=${encodeURIComponent(url)}`)
        .then(res => res.json())
        .then(result => {
          setData(result);
          setLoading(false);
        })
        .catch(err => {
          setError(err);
          setLoading(false);
        });
    }, [url]);
  
    return { data, loading, error };
  }
  

  在TemplateSelector中正确使用钩子返回的状态：

  const { data, loading, error } = getTemplates(decodedUrl);
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;
  if (!data) return <div>请输入有效URL</div>;
  
  const templates = data.Templates;
  const parameters = data.Parameters;
  

• 修复Designer组件的参数引用：

  function Designer(props) {
    return(
      <div className="Generator">
        <br/>
        Hi This is a test for {props.name} to see the {props.designerURL} and the {props.parameters}.
      </div>
    );
  }
  

验证效果 #

• 输入正常URL点击跳转，能正确匹配/designer/:url路由
• 输入包含特殊字符的URL（如example.com/path?query=1），编码后能正常传递参数
• 未输入内容时点击按钮不会触发跳转，避免空参数路由错误

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