Html - Changing the routing logic

gnehgo
September 19, 2023
259 views
0 votes
2 Answers

I decided to improve the routing in the pet project and found such an opportunity in the guide so that it would be possible to add chats.

import React from 'react';
import { Routes, Route } from 'react-router-dom'
import Layout from './Layout';
import Profile from "./Profile";
import PropTypes from "prop-types";

export default class Router extends React.Component {
  static propTypes = {
    chatId: PropTypes.number,
  };
  static defaultProps = {
    chatId: 1
  };

  render() {
    return (
      <Routes>
        <Route path='/' element={<Layout />} />
        <Route
          path='/chat/:chatId/'
          render={obj => <Layout chatId={Number(obj.match.params.chatId)} />}
        />
        {/*<Route path='/chat/1' element={<Layout chatId={1/>} />*/}
        {/*<Route path='/chat/2' element={<Layout chatId={2/>} />*/}
        {/*<Route path='/chat/3' element={<Layout chatId={3/>} />*/}
        <Route path='/profile' element={<Profile />}/>
      </Routes>
    )
  }
}

I used the commented text before, but adding chats is unrealistic to implement with it. ChatId, I pass it everywhere as props.

Answers

One simple way to do this is create an array of chatIds and map over it and the use it as:

CODESANDBOX

import React from "react";
import { Routes, Route, useParams } from "react-router-dom";
import Layout from "./Layout";
import Profile from "./Profile";

const chats = [1, 2, 3];

function Router(chatId) {
  const params = useParams();
  chatId = params.id;

  return (
    <Routes>
      <Route path="/" element={<Layout />} />

      {chats.map((chatNoId) => (
        <Route
          path={`/chat/${chatNoId}`}
          element={<Layout chatId={chatNoId} />}
          key={chatNoId}
        />
      ))}

      <Route path="/profile" element={<Profile user={"gnehgo"} />} />
    </Routes>
  );
}
export default Router;

Convert Layout to a React function component so it can read a declared chatId route path parameter.

Example:

import React from "react";
import { useParams } from "react-router-dom";
import MessageField from "./MessageField";
import ChatList from "./ChatList";
import Header from "./Header";
import "./style.css";
import { Flex } from "@react-css/flex";

 const Layout = () => {
  const { chatId } = useParams();

  return (
    <>
      <Flex>
        <Header chatId={chatId} />
      </Flex>
      <Flex>
        <ChatList />
        <MessageField chatId={chatId} />
      </Flex>
    </>
  );
};

export default Layout;

Update the router/routes to render a single dynamic route for the Layout and use the root "/" route to redirect to the default "/chat/1" route.

Example:

Router.js

import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Layout from "./Layout";
import Profile from "./Profile";

function Router() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/chat/1" replace />} />
      <Route path="/chat/:chatId" element={<Layout />} />
      <Route path="/profile" element={<Profile user={"gnehgo"} />} />
    </Routes>
  );
}
export default Router;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { Theme, presetGpnDefault } from "@consta/uikit/Theme";
import { BrowserRouter } from "react-router-dom";

import Router from "./Router";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Theme preset={presetGpnDefault}>
      <Router />
    </Theme>
  </BrowserRouter>
);

Demo

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Changing the routing logic

Answers

Demo