The first pull request for Release0.3

 For the first pull request of Release0.3, I choose a new project named react-course-theme to deal with. 

In the project, there is a crash issue when the user input a url to enter the website directly. But it will be fine if the user enter the website through the link of the main page.

Error message


When I analyze the project, I find the problem comes from using useLocation() function of "react-router-dom". When every route is connected, the value can be passed from one page to the next clicked page. But when you want to enter the website directly through URL, the new page can't get the value from the useLocation() function.

                                     Use useLocation() function to get value from previous page


Pass value through history.push() function



In order to fix the issue, I choose to parse the URL to get unique ID using useParams() function of "react-router-dom". Then I fetch the data from source data using find() function.

                                                              Fixed code



After modifying the code, I run the project again and the website looks well. Then I pull the request in GitHub.

                                                     Normal output page


I didn't use the "useLocation()" and "useParams()" function of "react-router-dom" before. Through this project I search for the related material and learn how to use these feature. It was a very good experiment for me.












Comments

Post a Comment

Popular posts from this blog

Choose a project in Release 0.4

 Release 0.4 is my fourth assignment for OSD600 course. There are three steps to complete it. The first step is to choose a project which you will work with. The second step is to update the process about the work. The last step is to show my result for the project. Because it is close to my test week. I don't have enough time to search for a new suitable project. So, I decide to work with the former project in this course. Actually I plan to work with my link checker project . I had designed some features which can be used to test if a link work well. But I think there are still something which I can promote. This is true for every IT project, and you can continually improve the project to make it better and better. In the first assignment for this course, my professor list many optional features which can be designed into the link check project. I will choose one of them which I don't complete to further refine my project.
Read more

Open source development course

 I'm Leon and a student of Computer Programming & Analysis program in Seneca College. I am taking OSD600 course of this semester in Toronto .   I am vey interesting in the open source. The course is my opportunity to know more things about it.  Open source development can provide us the opportunities to work with the developers around the world.  Open source technology and open source thinking also can benefit everyone, not only programmers. I want to study the open source tools and accumulate the development experience of real software project. I'm gonna search for commercial service development projects to understand the requirements of a business project. The GitHub trending repo I research is  Rocket.Chat . It is Open Source Solution for team communications.  Instant messaging is a widely used network application. I want to know how to develop this kinds of softwares. I'm gonna share my learning process with this course during this semester in my blog. I'd like
Read more

Publish project in Lab 9

Image
This week we start to practice how to release your project into public. In this way, the users don't need to clone  and build your project to run it locally. They can install it globally and use it easily. In this lab, I utilize my link checker project to practice to release it. Because my project was written by Node.js, so I choose npm platform to create my release.  First of all, I read the npm documents and check my project files step by step. I make sure the package.json file includes everything required such as name, version, dependencies, scripts, author and so on. After modifying all the things, I push these changes into my GitHub. Second, I create an account in npm website . It  is a necessary step if you want to publish your project into npm platform. Then,  I us e the command "npm login" to login the npm platform. After that, I use the command "npm push" to release my project. In the first release operation, there is a 403 error which shows " Yo
Read more