Make /timeline/local link still work

src/features/home-timeline/index.tsx

@@ -1,5 +1,6 @@
-import { useState, Suspense } from 'react';
+import { Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
 
 import Tabs from 'soapbox/components/ui/tabs.tsx';
 import { CommunityTimeline, FollowsTimeline } from 'soapbox/features/ui/util/async-components.ts';
@@ -8,7 +9,8 @@ import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 const HomeTimeline = () => {
   const { instance } = useInstance();
-  const [activeTab, setActiveTab] = useState('follows');
+
+  const match = useRouteMatch();
   const notifications = useAppSelector((state) => state.notificationsTab);
 
   return (
@@ -16,23 +18,26 @@ const HomeTimeline = () => {
       <Tabs
         items={[
           {
-            name: 'follows',
+            to: '/',
+            name: '/',
             text: <FormattedMessage id='tabs_bar.follows' defaultMessage='Follows' />,
-            action: () => setActiveTab('follows'),
             notification: notifications.home,
           },
           {
-            name: 'local',
+            to: '/timeline/local',
+            name: '/timeline/local',
             text: <div className='block max-w-xs truncate'>{instance.title}</div>,
-            action: () => setActiveTab('local'),
             notification: notifications.instance,
           },
         ]}
-        activeItem={activeTab}
+        activeItem={match.path}
       />
 
       <Suspense fallback={<div className='p-4 text-center'><FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' /></div>}>
-        {activeTab === 'follows' ? <FollowsTimeline /> : <CommunityTimeline />}
+        <Switch>
+          <Route path='/' exact component={FollowsTimeline} />
+          <Route path='/timeline/local' exact component={CommunityTimeline} />
+        </Switch>
       </Suspense>
     </>
   );

src/features/ui/index.tsx

@@ -192,6 +192,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         NOTE: we cannot nest routes in a fragment
         https://stackoverflow.com/a/68637108
       */}
+      {features.federating && <WrappedRoute path='/timeline/local' exact page={HomePage} component={HomeTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/global' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} publicRoute />}