Use nested routes

This commit is contained in:
Lim Chee Aun 2023-02-06 20:17:07 +08:00
parent 63b269e712
commit 4520822f1f
2 changed files with 8 additions and 4 deletions

View file

@ -185,7 +185,11 @@ function App() {
{isLoggedIn && <Route path="/l/:id" element={<Lists />} />} {isLoggedIn && <Route path="/l/:id" element={<Lists />} />}
<Route path="/:instance?/t/:hashtag" element={<Hashtags />} /> <Route path="/:instance?/t/:hashtag" element={<Hashtags />} />
<Route path="/:instance?/a/:id" element={<AccountStatuses />} /> <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
<Route path="/:instance?/p/l?" element={<Public />} /> <Route path="/:instance?/p">
<Route index element={<Public />} />
<Route path="l" element={<Public local />} />
</Route>
{/* <Route path="/:instance?/p/l?" element={<Public />} /> */}
{/* <Route path="/:anything" element={<NotFound />} /> */} {/* <Route path="/:anything" element={<NotFound />} /> */}
</Routes> </Routes>
<Routes> <Routes>

View file

@ -1,6 +1,6 @@
// EXPERIMENTAL: This is a work in progress and may not work as expected. // EXPERIMENTAL: This is a work in progress and may not work as expected.
import { useRef } from 'preact/hooks'; import { useRef } from 'preact/hooks';
import { useMatch, useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import Timeline from '../components/timeline'; import Timeline from '../components/timeline';
import { api } from '../utils/api'; import { api } from '../utils/api';
@ -8,8 +8,8 @@ import useTitle from '../utils/useTitle';
const LIMIT = 20; const LIMIT = 20;
function Public() { function Public({ local }) {
const isLocal = !!useMatch('/:instance/p/l'); const isLocal = !!local;
const params = useParams(); const params = useParams();
const { masto, instance } = api({ instance: params.instance }); const { masto, instance } = api({ instance: params.instance });
const title = `${instance} (${isLocal ? 'local' : 'federated'})`; const title = `${instance} (${isLocal ? 'local' : 'federated'})`;