This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 this series of articles is a learning summary of the jIRA task management system in action

📢 Thank you very much for reading

📢 May you be true to yourself and love life

In the last article, we have finished the display part of the list of items on the home page, and made use of a large number of Custom hooks to handle the OPERATION of urls, and realized the operation of mapping Query to URLS. At the same time, the useMutation collocation in react- Query is used to achieve optimistic update effect, and useDebounce is used to reduce requests and optimize performance

Next we will deal with the rest of the page, before developing the rest of the page, we first set up the skeleton, the page jump and title changes, which are basically independent of the business

💡 Knowledge points look first

  • usingrouter 6Implementing route hops
  • encapsulationuseDocumentTitle 来Set the document title

Implementation effect

1. Use router to redirect routes

To realize the jump, we first focus on the clicked Link. Here, we use the Link component to wrap the project, and use the TO attribute to realize the change of URL

{
    title: 'name'.sorter: (a, b) = > a.name.localeCompare(b.name),
    render(value, project) {
        return <Link to={String(project.id)}>{project.name}</Link>}}Copy the code

Now when we click on the first project, we redirect the route to the Projects /1 address, so obviously we can’t find the corresponding page, it’s missing the page identity

In the project/index.tsx file, we wrote the sidebar style and set the jump of the route. Here, we needed to use the React-Router and ANTD to achieve it

<Aside>
    <Menu mode={'inline'} selectedKeys={[routeType]}>
        <Menu.Item key={'kanban'} >
            <Link to={'kanban'} >kanban</Link>
        </Menu.Item>
        <Menu.Item key={'epic'} >
            <Link to={'epic'} >Task group</Link>
        </Menu.Item>
    </Menu>
</Aside>
Copy the code

Here, we use the Menu label and the Link component in the React-router-DOM to realize the address jump. The operation of the address in the sidebar will lead to the switch of the right side, kanban and task group. Therefore, we need to configure the corresponding Route connection component for the right side

<Main>
    <Routes>
        <Route path={'/kanban'} element={<KanbanScreen />} / ><Route path={'/epic'} element={<EpicScreen />} /> {/* The default route is push, which is equivalent to the top of the stack again, i.e. the current page is pushed twice, the first time the value does not match the second time */} {/* Replace is used to replace the passed top of the stack element, the following route becomes the top of the stack */}<Navigate to={window.location.pathname + '/kanban'} replace={true} />
    </Routes>
</Main>
Copy the code

We need to set a Navigate mode to give the route a bounce. If neither match, we will concatenate its address with /kanban to force it to/Kanban. This is how we enable the kanban page to be displayed when we click on the jump from the item list

There’s a lot to note here, and there’s a reason we used replace to replace the route!

The browser’s history is like the data structure of a stack. When a “to” jump is performed, we are pushing a route address into the stack. Navigate is the default route, which is also push, i.e. we are pushed twice to get to the current page

So when we click back to the previous page, we jump back to the current Kanban page, and push two more addresses onto the stack, so that our return will always loop here, never going back to the previous page.

Therefore, we need to replace the routing address at the top of the stack with repalce.

Q&A

In the realization of this part, encountered some problems, a little mention, for future generations to enjoy the shade

Navigate is unable to Navigate in the react- Router6-beta4 update, as the latest version of the router will give you the option to select the current version. The specific reason is not clear, in this case, you can lower the version to beta0

There is no problem in this version

Encapsulate useDocumentTitle to set the document title

Above we have successfully implemented the Router jump, have a certain understanding of the Router, next we make a fun hook, it is used to control the title of the document

The general effect is that we can transfer this hook to other projects and use it with high reusability

So let’s get our heads together

  1. First you need to get the currenttitle
  2. In the callhookYou need to receive onetitleAnd set onetitle
  3. Will it sometimes settitleSame thing, no need to reset

Let’s see how our implementation useDocumentTitle works

useDocumentTitle('Item List'.false)
Copy the code

The first parameter passes the title that needs to be set, and the second parameter configures whether the title needs to change when the component is uninstalled

First let’s set the type of argument it receives

export const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) = >{}Copy the code

Here we receive the passed title and configuration options

Let’s first let title drive page title updates

We use useEffect to modify the document title when the title changes

useEffect(() = > {
    document.title = title
}, [title])
Copy the code

Next, let’s deal with the case where the component does not change when unloaded. Why add this logic?

If we didn’t add this logic, we would need to specify title for each page and if not the default title would be displayed, so we added this optional configuration item

// Use the useRef custom hook. It will always save the title value for us.
const oldTitle = useRef(document.title).current
Copy the code

First we use useRef to save the current title, which is the title before the change

We then use useEffect to handle title changes when the component is unloaded

useEffect(() = > {
    // with closures that do not specify dependencies, the result is always the oldTitle, the oldTitle when the code first runs
    // It is not good for others to read
    return () = > {
        if(! keepOnUnmount) {document.title = oldTitle
        }
    }
}, [keepOnUnmount, oldTitle])
Copy the code

Here we’re taking advantage of closures, oldTitle is always the first run title

📌 summary

There is not much content in this article, and a simple hook is written to sum up a little

  1. usingRouterImplementing route hops
  2. avoidreact-routerVersion problem, error generated
  3. Package high reusabilityhook useDocumentTitle

Finally, I may not be clear enough in many places, please forgive me

💌 if the article has any mistakes, or have any questions, welcome to leave a message, also welcome private letter exchange