title: When i try to fetch data in my React project, then I get this error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
body: <p>I want to get filtered data from MongoDb using a specific email in my react project. So, I create an HTTP request using an email and then try to use the data, then I get the following error:</p>
  <blockquote>
  <p>GET http://localhost:5000/bloodRequest/amin@gmail.com 404 (Not Found)
  Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at
  position 0</p>
  </blockquote>
  <p>My client-side requesting code:</p>
  <pre><code>  useEffect(() =&gt; {
      fetch(`http://localhost:5000/bloodRequest/amin@gmail.com`)
        .then((res) =&gt; res.json())
        .then((data) =&gt; setRequests(data));   }, [requests]);
  </code></pre>
  <p>My server-side code:</p>
  <pre><code>  app.get(&quot;/donateBlood/:email&quot;, async (req, res) =&gt; {
        const email = req.params.email;
        const query = { email: email };
        const cursor = donateBloodsCollection.find(query);
        const result = await cursor.toArray();
        res.json(result);
      });
  </code></pre>
  <p><strong>But when I change the HTTP request syntax and use the email in the middle of the HTTP link, it works fine.</strong>
  example:</p>
  <p>Client-side code:</p>
  <pre><code> useEffect(() =&gt; {
      fetch(`http://localhost:5000/amin@gmail.com/bloodRequest`)
        .then((res) =&gt; res.json())
        .then((data) =&gt; setRequests(data));   }, [requests]);
  </code></pre>
  <p>server-side code:</p>
  <pre><code>app.get(&quot;/:email/donateBlood&quot;, async (req, res) =&gt; {
        const email = req.params.email;
        const query = { email: email };
        const cursor = donateBloodsCollection.find(query);
        const users = await cursor.toArray();
        res.json(users);
      });
  </code></pre>
  <p>In that case, it works properly, I don't know why? Can you explain, please?</p>