title: navigating results in changes of state in react after passing state to Link component
body: <p>I'm making a purchase invoice app in react.</p>
  <p>There are two pages in the app now.<br>
  One is a page to create new invoice which can be saved to database and exported to excel file. (Invoice.js)<br>
  The other is a page of a list of invoices each of them having modify/delete button. (Invoices.js)</p>
  <p>When an invoice in the list's modify button is clicked, it links to the creation-page, and the invoice data, which is a state, are passed as parameter.</p>
  <p>Without passing invoice data to the creation page, navigating had no problem at all.<br>
  However, after I put 'state' property to the Link component, the following error occurs.</p>
  <blockquote>
  <p>Invoices.js:21<br />
  Uncaught TypeError: Cannot read properties of undefined (reading 'substring')<br>
  at Invoices.js:21:1<br>
  at Array.filter ()<br>
  at Invoices.js:21:1<br>
  at invokePassiveEffectCreate (react-dom.development.js:23487:1)<br>
  at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)<br>
  at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)<br>
  at invokeGuardedCallback (react-dom.development.js:4056:1)<br>
  at flushPassiveEffectsImpl (react-dom.development.js:23574:1)<br>
  at unstable_runWithPriority (scheduler.development.js:468:1)<br>
  at runWithPriority$1 (react-dom.development.js:11276:1)<br></p>
  </blockquote>
  <p>Here are my source codes</p>
  <p>// App.js</p>
  <pre><code>const App = () =&gt; {
    return (
      &lt;BrowserRouter&gt;
        &lt;Container maxWidth=&quot;lg&quot;&gt;
          &lt;NavBar /&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; exact element={&lt;Navigate to=&quot;/invoice/create&quot; /&gt;} /&gt;
            &lt;Route path=&quot;/invoice/create&quot; element={&lt;Invoice /&gt;} /&gt;
            &lt;Route path=&quot;/invoice/view&quot; element={&lt;Invoices /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Container&gt;
      &lt;/BrowserRouter&gt;
    );
  };
  </code></pre>
  <p>// Invoices.js</p>
  <pre><code>import React, { useEffect } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { getInvoices } from '../../actions/invoices';
  import InvoiceRow from './InvoiceRow';
  
  const Invoices = () =&gt; {
    const [month, setMonth] = React.useState(new Date().getMonth() + 1);
  
    const invoices = useSelector((state) =&gt; state.invoices);
    const dispatch = useDispatch();
  
    const [invoicesCurrent, setInvoicesCurrent] = React.useState([]);
  
    useEffect(() =&gt; {
      dispatch(getInvoices());
    }, [dispatch]);
  
    useEffect(() =&gt; {
      setInvoicesCurrent(invoices.filter((invoice) =&gt; Number(invoice.invoiceDate.substring(5, 7)) === month));
    }, [invoices, month, dispatch]);
    
    ...
  
    // Link component used: invoice is the one of invoice in invoices state
      &lt;Link to='/invoice/create'
            state={{ ...invoice }}&gt;
        &lt;Button&gt;Modify&lt;/Button&gt;
      &lt;/Link&gt;
  </code></pre>
  <p>// Invoice.js</p>
  <pre><code>const InvoiceComponent = () =&gt; {
    const location = useLocation();
    const invoice = location.state;
    const [company, setCompany] = useState(invoice ? invoice.company : '');
    const [employee, setEmployee] = useState(invoice ? invoice.employee : '');
    const [invoiceDate, setInvoiceDate] = useState(invoice ? invoice.invoiceDate : new Date());
    const [orderId, setOrderId] = useState(invoice ? invoice.orderId : '');
    const [companyTel, setCompanyTel] = useState(invoice ? invoice.companyTel : '');
    const [companyFax, setCompanyFax] = useState(invoice ? invoice.companyFax : '');
  
    const items = useSelector((state) =&gt; state.items);
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      const last = document.getElementById(`row-${items.length - 1}-0`);
      if (last != null) last.focus();
    }, [items.length]);
  
    useEffect(() =&gt; {
      if (invoice) {
        dispatch(updateItems(invoice.items));
      }
    }, [dispatch, invoice]);
  
    ...
  
  </code></pre>
  <p>I must share current app behavior.</p>
  <ol>
  <li>When 'Modify' button clicked, creation page is loaded with invoice data.</li>
  <li>Then navigating with 'Go back', 'Go forward', or clicking a link to any of both pages shows the upper error.</li>
  <li>in the useEffect hook in Invoices.js that calls setInvoicesCurrent,<br>
  when I console.log(invoices), it is not an array of invoice, rather it is an array of other state(items), which was used in Invoice.js</li>
  <li>Refreshing the page makes all thing reset.</li>
  </ol>
  <p>Is there any guideline for managing redux store when navigating?</p>
  <blockquote>
  <p>// console.log(invoices) in useEffect calling setInvoicesCurrent  <br>
  // <strong>Normally opened</strong>:  <br> invoices <br> (6) [{…}, {…}, {…}, {…}, {…},
  {…}]<br> 0: {_id: '1', company: 'cmp1', employee: 'e1', invoiceDate:
  '2022-01-07T05:14:15.482Z', orderId: '', …}<br> 1: {_id: '2', company:
  'cmp2', employee: 'e1', invoiceDate: '2022-01-07T05:14:15.482Z',
  orderId: '', …}<br> 2: {_id: '3', company: 'comp3', employee: 'e1',
  invoiceDate: '2022-01-07T05:14:15.482Z', orderId: '', …}<br> 3: {_id:
  '4', company: 'comp4', employee: 'e1', invoiceDate:
  '2022-01-07T05:14:15.482Z', orderId: '', …}<br> 4: {_id: '5', company:
  'comp5', employee: 'e1', invoiceDate: '2022-01-07T05:14:15.482Z',
  orderId: '', …}<br> 5: {_id: '6', company: 'comp6', employee: 'e1',
  invoiceDate: '2022-01-07T13:10:56.380Z', orderId: '', …}<br> length: 6
  [[Prototype]]: Array(0)</p>
  <p>Each Array has the following data <br>
  0:<br>
  company: &quot;cmp1&quot;<br>
  companyFax: &quot;1222222222&quot;<br> companyTel: &quot;122331232&quot;<br> employee:
  &quot;e1&quot;<br> invoiceDate: &quot;2022-01-07T05:14:15.482Z&quot;<br> items:
  Array(2)<br>   0: {name: 'item1', spec: 'spec1', qty: 1, price: 10000,
  total: 10000, …}<br>   1: {name: 'item2', spec: 'spec2', qty: 20,
  price: 1000, total: 20000, …}<br>   length: 2<br>   [[Prototype]]:
  Array(0)<br> modifiedOn: &quot;2022-01-07T05:25:14.771Z&quot;<br> orderId:
  &quot;&quot;<br>
  __v: 0<br>
  _id: &quot;1&quot;<br></p>
  <p>// console.log(invoices) <strong>when ERROR occurs</strong>:  <br>invoices <br> (6)
  [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)] <br> 0:
  Array(2) <br>   0: {name: 'item1', spec: 'spec1', qty: 1, price:
  10000, total: 10000, …} <br>   1: {name: 'item2', spec: 'spec2', qty:
  20, price: 1000, total: 20000, …} <br>   length: 2 <br><br />
  [[Prototype]]: Array(0) <br> 1: Array(2) <br>   0: {name: 'item1',
  spec: 'spec1', qty: 1, price: 10000, total: 10000, …} <br>   1: {name:
  'item2', spec: 'spec2', qty: 20, price: 1000, total: 20000, …} <br><br />
  length: 2 <br>   [[Prototype]]: Array(0) <br> 2: (2) [{…}, {…}] <br>
  3: (2) [{…}, {…}] <br> 4: (2) [{…}, {…}] <br> 5: (2) [{…}, {…}] <br>
  length: 6 <br> [[Prototype]]: Array(0) <br></p>
  </blockquote>