foo.tsx

import {createFileRoute, useNavigate, useSearch} from '@tanstack/react-router'
import {useState, Activity} from 'react'



export const Route = createFileRoute('/test')({
  component: RouteComponent,
})

function RouteComponent() {
  const view = useSearch({
    strict: false,
    select: state => state.view
  })

  const nav = useNavigate()
  const showMap = () => {
    nav({
      search: {view:'map'},
    })
  }

  const showList = () => {
    nav({
      search: {view:'list'},
    })
  }


  const [count, setCount] = useState(1)

  return (
    <div>
      <Activity mode={view === 'list' ? 'visible' : 'hidden'}>
        <div>Showing list</div>
        <div>{count}</div>
        <button onClick={() => setCount(count + 1)}>click</button>
        <button onClick={showMap}>switch</button>
      </Activity>

      <Activity mode={view === 'map' ? 'visible' : 'hidden'}>
        <div>Showing map</div>
        <button onClick={() => setCount(count + 1)}>click</button>
        <button onClick={showList}>switch</button>
      </Activity>
    </div>
  )
}