Code Monkey home page Code Monkey logo

react-router-website's Introduction

React Router Website!

Setup

Copy the contents of .env.example file to the .env file and add your information to it.

cp .env.example .env

Install dependencies

npm install

That's it!

Development

npm run dev

There are a couple LRUCache's for talking to GitHub and processing markdown that expire after 5 minutes, if you want them to expire immediately for local development, set the NO_CACHE environment variable.

NO_CACHE=1 npm run dev

To work on local docs clone the react router repo and put it in the same folder as this website repo:

~/ur-stuff/reactrouter-website
~/ur-stuff/react-router

Then point .env at it like this:

LOCAL_REPO_RELATIVE_PATH="../react-router"

You'll notice a "local" option in the version dropdown menu when the app is running. That will pull the docs from your machine instead of GitHub.

react-router-website's People

Contributors

aakashsardana avatar brookslybrand avatar brophdawg11 avatar chaance avatar dependabot[bot] avatar github-actions[bot] avatar iamyoungbossy avatar jacob-ebey avatar jimniels avatar kisaragi-hiu avatar louis-smit avatar machour avatar mcansh avatar michaeldeboey avatar mjackson avatar psullivan6 avatar rakleed avatar ryanflorence avatar sinchang avatar tabishnaqvi1311 avatar xhomu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-router-website's Issues

Tutorial: confirm in contact.jsx

I was receiving an error stating "Unexpected use of 'confirm'"
image

I was able to resolve this by adding window.confirm instead of just confirm
image

[Docs]: Add Copy to Clipboard Button for the source code

Describe what's incorrect/missing in the documentation

While working on the react-router tutorial, I was astonished to find that there is no copy to clipboard button for the code examples probably encouraging devs to write code on their own

1

[Bug]: `useLocation` docs url on vs code redirect to a 404 page

What version of React Router are you using?

6.4.3

Steps to Reproduce

  • Create a simple react project with react-router 6.4.3
  • Call the useLocation hook -> const location = useLocation()
  • Hover the useLocation() and a pop-up will appear:

image

- If you press on the url, it returns a 404 page because it redirects to https://reactrouter.com/en/6.5.0/docs/en/v6/hooks/use-location instead of https://reactrouter.com/en/main/hooks/use-location or something like that

Expected Behavior

Redirecting to the useLocation() docs page

Actual Behavior

Redirecting to 404 page

Edit: All the hooks docs url are wrong. The problem here is that i'm using an old react router version (6.4.3) instead of the main one (6.5.0)

[Docs]: Links on navbar do not work as intended

Describe what's incorrect/missing in the documentation

Describe what's incorrect/missing in the documentation

The right sidebar functionality on the React Router documentation website is not working properly.

Steps to reproduce

  1. Visit the React Router documentation website.
  2. Navigate to any link within the right sidebar. first navigate works correctly
  3. Observe the screen momentarily jumping and then returning to its previous state.
  4. Notice that the link in the browser updates correctly, but the content does not reflect the change.
  5. Click the same link again, and observe that the functionality works as expected this time.

Video of the bug

Screen.Recording.-.Made.with.FlexClip.webm

System info

  • Windows 10
  • Chrome Version 122.0.6261.95 (Official Build) (64-bit)

[Docs]: Right nav links semi-broken in chrome and edge

Describe what's incorrect/missing in the documentation

Expected behavior: clicking on links in the right nav of the documentation site should scroll to the anchor on the first click.

Actual behavior: first link clicked in the right nav always works, but all subsequent clicks on different links do not scroll to the anchor, unless you click on them a second time in a row without clicking any other links.

Details:

  • Affects chrome (on Windows 10):120.0.6099.110
  • Affects Edge (on Windows 10): 120.0.2210.77
  • Affects chrome on a mobile device
  • Does not affect firefox 121.0

Improve docs navigation

See remix.run for details

  • Make lefthand nav sections collapsable
  • Make righthand nav nested levels indented

[Docs]: Documentation Light/Dark Theme

Describe what's incorrect/missing in the documentation

I noticed some misbehavior in the functionality when changing themes in React Router Docs.
The theme is changing back or back and forth between dark/light when you:

  1. click on the theme icon and change the theme and then immediately click on the h2 (for example in the Tutorial page heading with the id="data-writes--html-forms") or
  2. clicking on the empty space between the main text and the sidebar with the headings

This is checked on both Chrome (Version 118.0.5993.117 ) and Firefox (Version 118.0.5993.117 )

changeThemeProblem

[Feature Request]: Add 'Copy' Button to Code Samples in Documentation

Description:

I'd like to propose a feature for the official React Router documentation website. While going through the various examples in the documentation, I noticed that there isn't a straightforward way to copy the code samples.

Feature Description:

It would be extremely helpful if a 'Copy' button could be added to each of the code blocks within the documentation. This button would allow users to instantly copy the code samples to their clipboard, reducing the chance of copying errors and saving time.

Benefits:

  • Increased efficiency: This feature would allow developers to easily copy and paste code into their IDE without needing to manually select and copy the code, saving time and effort.
  • Reduced error potential: By enabling one-click copying, we can minimize the chance of copying errors that might occur when users manually select code blocks.
  • Improved user experience: This feature would make the documentation more user-friendly and increase its utility for developers of all experience levels.

I believe this would be a valuable addition to the React Router documentation, and I'd be happy to discuss it further if needed.

Fix broken edit link

Seems like the edit button in the footer is adding 1 too many "/docs"

404.mov

issue with example We have an example for this: https://github.com/remix-run/react-router/tree/dev/examples/auth

          We have an example for this: https://github.com/remix-run/react-router/tree/dev/examples/auth

Originally posted by @timdorr in remix-run/react-router#10206 (comment)

Sorry, not shure is there a bug or stackblitz fault, but

$ vite
failed to load config from /home/projects/mkligxplv.github/vite.config.ts
error when starting dev server:
Error: The package "@esbuild/linux-x64" could not be found, and is needed by esbuild.

on https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src%2FApp.tsx

Fix www redirections

http://www.reactrouter.com and https://www.reactrouter.com currently show a 500 error.
Should redirect to https://reactrouter.com instead.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.