Q: getting Uncaught Error: Cannot include a '?' character in a manually specified.... on Link Container <Nav>
        <Nav.Item>
          <strong>Categories</strong>
        </Nav.Item>
        {
          categories.map((category) => 
          (
            <Nav.Item key={category}>
              {/* <Link
                to={`/search?category=${category}`}
                onClick={() => setSidebarOpen(false)}
              >
                {category}
              </Link> */}
              <LinkContainer
                to={`/search?category=${category}`}
                onClick={() => setSidebarOpen(false)}
              >
                <Nav.Link>{category}</Nav.Link>
              </LinkContainer>
            </Nav.Item>
          ))
        }
      </Nav>

Hi i'm getting this error and the thing is i used this kind of code before and i didnt get any error at all, and I don't get any error when using just the Link(the one that is commented out) but when I use this container i get this error
Uncaught Error: Cannot include a '?' character in a manually specified to.pathname field [{"pathname":"/search?category=Cameras"}].  Please separate it out to the to.search field. Alternatively you may provide the full path as a string in  and the router will parse it for you.

A: react-router 6.4.2, 6.4.1, 6.4.0 have issue on ? character !

*

*6.4.2 on <Link> + <NavLink> tags.

*6.4.1 && 6.4.0 on <Route>.

 Use version 6.3.0 to get rid of this annoying issue for now.

A: Found the solution for v6.4.x
Example:
import {Link} from "react-router-dom"

const Comp = () => {
  return (
    <div>

      <Link
        to={{
          pathname: "/search",
          hash: "#hash",
          search: "?category=abcd", 
        }}
      >
        Link Text
      </Link>

    </div>
  )
}


A: Here is the solution for react-router-dom@6.7.0 and react-router-bootstrap@0.26.2
Typescript:
interface Props {
  children?: React.ReactNode | ((props: { isActive: boolean; isPending: boolean }) => React.ReactNode);
  to: To;
}

export default function FixedLinkContainer({ to, children }: Props) {
  let path: Path;
  if (typeof to == 'string') {
    const url = new URL(to as string, window.location.origin);
    path = {
      hash: url.hash,
      pathname: url.pathname,
      search: url.search,
    };
  } else {
    path = to as Path;
  }
  return <LinkContainer to={path}>{children}</LinkContainer>;
}

