[Bug]: useLocation value being null when 0 is set as the state value of useNavigate

[jungwoo3490]

What version of React Router are you using?

6.22.3

Steps to Reproduce

Hi :)

When I set useNavigate state like this or other numeric values and get this value by useLocation hooks, It works well.

navigate("/sub", { state: 1 });

const location = useLocation();
console.log(location.state); // 1

But when I set state value of 0, location.state value was 'null'.

navigate("/sub", { state: 0 });

const location = useLocation();
console.log(location.state); // null

I made simple example project to reproduce a bug I encountered.

Please Follow these steps

1. Clone this Project
   > git clone https://github.com/jungwoo3490/Reproduce-useLocation-Bug.git

2. Move to Project Directory
   > cd Reproduce-useLocation-Bug

3. Install dependency packages
   > yarn

4. Start project
   > yarn dev

5. Click Buttons and check state values!!

Then you can see that the values of 1 and 2 are correctly transmitted, but the value of 0 is transmitted null.

Of course, if I wrapped it in an object and sent a value of 0 to the property, it was transmitted well, but I thought this is strange that other numerical transmitted well simply by delivering the value.

I was very confused about only the 0 being treated as null.

I think this situation may cause confusion for developers and cause unintended errors.

After I looked up the useLocation code myself, I could see why this was happening. It recognized that the value of 0 is treated false, so the state was set to null.

So I suggest to assign the value of 0 to the state as it is, instead of setting 0 as null.

Expected Behavior

You will not be confused about situations where only the value 0 is null when you use the useNavigate state only numeric values.

Actual Behavior

From 0 to 3, each number was set to the state value of useNavigate and transmitted, but when the value was received by useLocation, only the value of 0 was received as null.