profile
viewpoint
React Training ReactTraining Carlsbad, CA https://reacttraining.com High-quality open source software from React Training

ReactTraining/react-router 41894

Declarative routing for React

ReactTraining/history 6651

Manage session history with JavaScript

ReactTraining/react-media 2257

CSS media queries for React

ReactTraining/react-broadcast 1319

Reliably communicate state changes to deeply nested React elements

ReactTraining/classic-react-workshop 1287

Lectures and exercises for React Training workshops

ReactTraining/react-stdio 618

Render React.js components on any backend

ReactTraining/hooks-workshop 387

The course material for our React Hooks workshop

ReactTraining/react-history 261

Manage session history with React

ReactTraining/react-point 204

Fast touch events for React

ReactTraining/react-router-5-course 123

Learn React Router 5 - by ReactTraining.com

startedReactTraining/history

started time in 38 minutes

startedReactTraining/history

started time in 2 hours

startedReactTraining/history

started time in 4 hours

push eventReactTraining/react-workshop

Brad Westfall

commit sha 00c4ec84473a4b335c03135ab6aa02fa72f24b52

end of day one

view details

push time in 7 hours

startedReactTraining/history

started time in 8 hours

issue closedReactTraining/react-router

Redirects when reloading using lazy loading

<!-- Thank you for contributing!

Have a usage question?

The issue tracker is meant for bug reports only. This isn't the best place for usage questions. Questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:

  • Read the docs: https://reacttraining.com/react-router
  • Check out the list of frequently asked questions: https://github.com/ReactTraining/react-router/blob/master/FAQ.md
  • Explore examples: https://reacttraining.com/react-router/web/example/basic
  • Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/ask?tags=react-router
  • Ask in chat: https://discord.gg/0ZcbPKXt5bYaNQ46

Think you found a bug?

The best bug report is a failing test in the repository as a pull request. Otherwise, please use the "BUG REPORT" template below.

Have a feature request?

Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric. -->

<!-- BUG TEMPLATE -->

Version

5.2.0

Test Case

https://codesandbox.io/s/hungry-robinson-5w30d

Steps to reproduce

  1. go to codesandbox ^
  2. press link (goto about)
  3. reload the embeded browser
  4. notice how the page redirects you to home

Expected Behavior

Expected that the page does not redirect me back to the home page when reloading using lazy loading.

Actual Behavior

The page redirects me to the home page when reloading using lazy loading.

closed time in 8 hours

halvardssm

issue commentReactTraining/react-router

Redirects when reloading using lazy loading

Suspense needs to be outside of the Switch. Switch only works on the first level of children, so it's getting in the way.

halvardssm

comment created time in 8 hours

issue openedReactTraining/react-router

Lazy loading routes fail with redirect

<!-- Thank you for contributing!

Have a usage question?

The issue tracker is meant for bug reports only. This isn't the best place for usage questions. Questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:

  • Read the docs: https://reacttraining.com/react-router
  • Check out the list of frequently asked questions: https://github.com/ReactTraining/react-router/blob/master/FAQ.md
  • Explore examples: https://reacttraining.com/react-router/web/example/basic
  • Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/ask?tags=react-router
  • Ask in chat: https://discord.gg/0ZcbPKXt5bYaNQ46

Think you found a bug?

The best bug report is a failing test in the repository as a pull request. Otherwise, please use the "BUG REPORT" template below.

Have a feature request?

Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric. -->

<!-- BUG TEMPLATE -->

Version

5.2.0

Test Case

https://codesandbox.io/s/hungry-robinson-5w30d

Steps to reproduce

  1. go to codesandbox ^
  2. press link (goto about)
  3. reload the embeded browser
  4. notice how the page redirects you to home

Expected Behavior

Expected that the page does not redirect me back to the home page when reloading using lazy loading.

Actual Behavior

The page redirects me to the home page when reloading using lazy loading.

created time in 9 hours

startedReactTraining/history

started time in 10 hours

startedReactTraining/react-router

started time in 11 hours

create barnchReactTraining/react-workshop

branch : zoom-care

created branch time in 14 hours

issue commentReactTraining/react-router

[v6] Discussion: Impact on SSR after removal of <Redirect />

We will implement RR alternative with full SSR support and API similar to RR5. I will link here once we have stable implementation.

pseudo-su

comment created time in 15 hours

issue commentReactTraining/react-router

[v6] Discussion: Impact on SSR after removal of <Redirect />

@pseudo-su would it be an option to create your own <Redirect /> component which calls <Navigate /> on the client side and implements your own redirect status code rendering on the server?

Yes, it's possible. The reason I opened this issue is because I wasn't sure if this side-effect is/was a deliberate deprecation or not. Personally I think if the plan is to deprecate/remove the current documented way of doing SSR with react router it'd be a really good idea to at least update the current docs to clarify that things to do with SSR are going to be removed from react-router going forward.

That was the point of my original question:

Is this signposting a deliberate move away from having SSR capability in react-router going forward?

For what it's worth, I'm assuming the silence means that the change will be made and server rendering will be removed from react-router.

It's not a massive inconvenience, but the lack of clarity makes it confusing as to if people need to do anything. In case anyone's particularly curious, this is what I did to prepare for the removal of <Redirect /> and staticContext.

https://github.com/bootleg-rust/sites/tree/9028da0c40d1261a407479c61dd8c5c27ae47453/packages/lib-ssr-toolbox/src/http

tl;dr basically I have a seperate HttpProvider and have copied some of the current implementation of <Redirect /> etc:

// universal/app.js
function Dashboard() {
  return <>
    Home page
    <CacheControl maxAge={200} />
  </>
}

function Error404() {
  return <>
    <HttpStatus code={400} />
    {/* etc */}
  </>
}

function App() {
  return (
    <Switch>
      <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/thing2" component={Thing2} />
      <Route component={Error404} />
    </Switch>
  )
}

// client/index.js
const mountElement = document.getElementById('root')
hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>
  mountElement
)

// server/index.js
function handler(ctx: koa.Context) {
  const httpContext: HttpContextData = {
      cacheControl: [],
      statusCode: 200,
    };
  const renderedPage = render(
    <HttpProvider context={httpContext}>
      <StaticRouter location={ctx.request.url}>
        <App />
      </StaticRouter>
    </HttpProvider>
  )

  // Redirect when <Redirect /> is rendered
  if (httpContext.redirectLocation) {
    // Somewhere a `<Redirect>` was rendered
    ctx.redirect(httpContext.redirectLocation);
    return;
  }

  // Handle status codes
  ctx.status = 200;
  if ([400, 401, 402, 403, 404].includes(httpContext.statusCode)) {
    ctx.status = httpContext.statusCode;
  }
  // Set cache-control based on rendered content
  const cacheControl = reconcileCacheControlOptions(httpContext);
  const cacheControlValue = format(cacheControl);
  if (cacheControlValue) {
    ctx.set("Cache-Control", cacheControlValue);
  }

  ctx.response.body = wrapPageInHTMLTemplate(renderedPage);
}
pseudo-su

comment created time in 16 hours

startedReactTraining/react-router

started time in 16 hours

startedReactTraining/react-router

started time in 18 hours

issue commentReactTraining/react-router

useParams hook returning new objects every time its called

@timdorr Could you elaborate a bit. I am using react-router-dom@6 and experience the same problem.

using useParams():

const { id, processId } = useParams();
const parsedIdParam = parseInt(id);
...

When I enable why-did-you-render to check what is up I get the following warning:

{Component: ƒ} "Re-rendered because of hook changes:"
 [hook useContext result]
   different objects that are equal by value.

I am not using useContext, this must be coming from useParams. What would be a better way to use useParams() hook preventing to re-render when the params have not changed?

Thank you in advance for clearing that up for me!

csantos1113

comment created time in 18 hours

startedReactTraining/react-point

started time in 21 hours

fork Tyx-muyu/history

Manage session history with JavaScript

fork in 21 hours

startedReactTraining/react-router

started time in a day

startedReactTraining/history

started time in a day

startedReactTraining/react-router

started time in a day

startedReactTraining/react-router

started time in a day

create barnchReactTraining/react-workshop

branch : 2020-10-20-pacific

created branch time in a day

push eventReactTraining/react-workshop

Brad Westfall

commit sha 872d78738ae995c88c9e8ded445f70ff55807527

fix readme

view details

push time in a day

startedReactTraining/react-router

started time in a day

push eventReactTraining/react-router

Amit Mittal

commit sha a97dbdb7297474ff0114411e363db2c8fb417e55

Close Route Tag (#7665)

view details

push time in a day

pull request commentReactTraining/react-router

Close Route Tag

Thanks!

amittal-quot

comment created time in a day

startedReactTraining/react-router

started time in a day

push eventReactTraining/react-workshop

Brad Westfall

commit sha 949a4df2ed3ee826236b410fa7025955002d6ee3

better example for lecture

view details

push time in a day

issue commentReactTraining/react-router

Empty string hash fragment `#` is stripped from `to` prop

So this is causing a bug in react-router-hash-link https://github.com/rafgraph/react-router-hash-link/pull/69 for <NavHashLink> because when the # is stripped the location doesn't doesn't match the to prop so the link isn't active.

@timdorr would you consider reopening this? Thanks.

rafgraph

comment created time in 2 days

startedReactTraining/react-router

started time in 2 days

issue commentReactTraining/react-router

[v6] Discussion: Impact on SSR after removal of <Redirect />

@pseudo-su would it be an option to create your own <Redirect /> component which calls <Navigate /> on the client side and implements your own redirect status code rendering on the server?

pseudo-su

comment created time in 2 days

startedReactTraining/history

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router-5-course

started time in 2 days

startedReactTraining/react-router

started time in 2 days

PR opened ReactTraining/react-router

Close Route Tag
+1 -1

0 comment

1 changed file

pr created time in 2 days

issue commentReactTraining/react-media

Media tries to update unmounted component

@edorivai I'm seeing it with useMedia having react-media-2.0.0-rc.1 in Chrome 86.0, Safari 14.0 and Firefox 82.0.

jonask94

comment created time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/history

started time in 2 days

pull request commentReactTraining/react-router

[v6] Add location prop to Routes and RouteOptions to useRoutes

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. You can add the fresh label to prevent me from taking any action.

smvv

comment created time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 2 days

issue commentReactTraining/react-router

useNavigate hook causes waste rendering

Please reopen. This causes half of my application to rerender, just because some searchParams change.

useNavigate changes when the current location changes.

But the current location is only relevant for useNavigate's internal state. There's no reason to recreate the navigate function each time.

iammrali

comment created time in 2 days

startedReactTraining/react-router

started time in 2 days

startedReactTraining/react-router

started time in 3 days

startedReactTraining/react-router

started time in 3 days

issue commentReactTraining/react-media

Media tries to update unmounted component

@jonkan @clieee @jhimelymendoza could you guys confirm whether you're seeing this with useMedia and/or <Media>?

Would also be helpful if y'all could post browser and react-media versions. 🙏

jonask94

comment created time in 3 days

fork migueljteixeirasky/history

Manage session history with JavaScript

fork in 3 days

pull request commentReactTraining/react-router

[dev] add useRouteMatch to react-router

Any updates on this?

smmoosavi

comment created time in 3 days

pull request commentReactTraining/react-router

[v6] Add history prop to BrowserRouter

We had an issue with Authentication. Our Auth provider needed to use navigate, that needed to be inside of the Router, but since every child of Router gets re-rendered, the Auth run again.

The solution was to use this HistoryRouter, have the Auth Provider use history instead of useNavigate, and then give the HistoryRouter the same instance of history.

I think this is needed.

salvoravida

comment created time in 3 days

issue commentReactTraining/react-media

Media tries to update unmounted component

Same here

jonask94

comment created time in 3 days

issue commentReactTraining/react-media

Media tries to update unmounted component

@edorivai I'm seeing the same issue using react-media@next (react-media@^2.0.0-rc.1) :/

jonask94

comment created time in 3 days

startedReactTraining/react-router

started time in 3 days

startedReactTraining/react-router

started time in 3 days

startedReactTraining/react-router

started time in 3 days

push eventReactTraining/react-workshop

Brad Westfall

commit sha c5d8e065e5beb023de32cd453cf169282f9a0def

rename rendering to "thinking in react" and fix some unit test stuff

view details

push time in 3 days

issue closedReactTraining/react-router

nav bar disappears when changing route

Got the basename solution from https://github.com/ReactTraining/react-router/issues/7128. With the basename in the Routes element, the <nav> element will disappear after clicking on the nav link. We need a way to have the nav receives a basename and stays on the page after changing route. In router 5.0, we can do that by setting basename in the BrowserRouter level. Is there a way to make the nav bar stays after changing route and applying the basename on the link in 6.0?

// url where new router is created: https://my-site/who/users
const RootModule = () => {
  return (
    <main>
      <BrowserRouter>
        <Routes basename="who/users">
          <nav>
            <Link to="">Home</Link>
            <Link to="who/users/about">About</Link>
            <Link to="who/users/users">Users</Link>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="who/users/about" element={<About />} />
            <Route path="who/users/users" element={<Users />} />
          </Routes>
        </Routes>
      </BrowserRouter>
    </main>
  );
};

Thanks.

closed time in 3 days

mosodev

issue commentReactTraining/react-router

nav bar disappears when changing route

:wave: @mosodev, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Please feel free to clarify your issue if you think it was closed prematurely.

mosodev

comment created time in 3 days

issue openedReactTraining/react-router

nav bar disappears when changing route

ha! lack of docs ( i know alpha ) - use source code Martin!

Solution: Routes has basename.

// url where new router is created: https://my-site/who/users
const RootModule = () => {
  return (
    <main>
      <BrowserRouter>
        <Routes basename="who/users">
          <nav>
            <Link to="">Home</Link>
            <Link to="who/users/about">About</Link>
            <Link to="who/users/users">Users</Link>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="who/users/about" element={<About />} />
            <Route path="who/users/users" element={<Users />} />
          </Routes>
        </Routes>
      </BrowserRouter>
    </main>
  );
};

With this code, the basename does apply to the <LInk> which is great. However, the nav bar will disappear after clicking on a nav link. Is there a way to make the nav bar stays after changing route and applying the basename on the link?

Thanks.

created time in 3 days

fork laoshaw/history

Manage session history with JavaScript

fork in 3 days

issue commentReactTraining/react-router

useRouteMatch not exported

@vjpr

const match = useRoutes([{path: ':tab'}]) // relative to parent route console.log(match.props.value.tab) // will return the param tab

I guess It should be match.props.value.params.tab. Then it works! 👍

And this is at least much more usable than my hacky workaround... <details> <summary>Spoiler: The ugly piece of code</summary>

const MyTabs = () => {
  const { tab } = useParams();

  return (
    <Tabs value={tab}>
      <Tab component={Link} to="../tabname1" label="Label 1" value="tabname1" />
      <Tab component={Link} to="../tabname2" label="Label 2" value="tabname2" />
    </Tabs>
  );
}

const MyComponent = () => {
  return (
    <>
      <Routes>
        <Route path=":tab/*" element={<MyTabs />} />
      </Routes>
      <Routes>
        <Route path="tabname1" element={<TabContent1 />} />
        <Route path="tabname2" element={<TabContent2 />} />
      </Routes>
    </>
  )
}

</details>

Anyways, I totally agree with your other points and concerns!

smmoosavi

comment created time in 3 days

startedReactTraining/react-router

started time in 3 days

startedReactTraining/react-router

started time in 3 days

issue commentReactTraining/react-router

Release date/rough time estimate before React Router 6 will be released

@beckerei Good news.

Release v6 won't change API.

DeadManPoe

comment created time in 3 days

create barnchReactTraining/react-workshop

branch : wizeline-oct-2020

created branch time in 4 days

pull request commentReactTraining/react-router

[dev] add useRouteMatch to react-router

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. You can add the fresh label to prevent me from taking any action.

smmoosavi

comment created time in 4 days

push eventReactTraining/react-router

Amnon Sadeh

commit sha 9016c5191cb1b8ce727dc5aaed97376b1b291a70

docs: fix typo (its -> it's) (#7663)

view details

push time in 4 days

pull request commentReactTraining/react-router

docs: fix typo (its -> it's)

targumon

comment created time in 4 days

PR opened ReactTraining/react-router

Fixing typo (its -> it's)
+1 -1

0 comment

1 changed file

pr created time in 4 days

issue openedReactTraining/history

MemoryHistory does not seem to behave the same way as BrowserHistory

In my project, we are using Browser History for the running app, and for the tests we use Memory History. This is based on the documentation that Memory History is particularly for test and any environment that does Not have a browser.

For some reason, Browser History works while running the app, but Memory History doesn't.

We use useHistory to get the history. We have a useEffect which should be invoked in case history.location.search has changed - as we have added it as part of the dependency array. This works in the browser only.

While debugging the test, we found that history.location.search does change, but the useEffect never gets called. I'm a newbie, no React pro, but for some reason, I feel that Memory History is the issue. But looking at the code at a glance, I'm not able to find out much differences in Browser History and Memory History.

Is this even possible? Or we just have some weird issue in our project which causes actual app to run properly, but not the tests which are more isolated and are probably setup correct

created time in 4 days

issue closedReactTraining/react-router

access params in route

i am define route below.<br />

    <Route path="/TweetsByHashTag/:hashtag">
       <TweetsByHashTag />
    </Route>

in component TweetsByHashTag not found props.match.params.hashtag.<br /> and when alter route below.<br />

    <Route path="/TweetsByHashTag/:hashtag" component={TweetsByHashTag} />

i am access to props.match.params.hashtag.<br /> why?<br /> is it bug?

closed time in 4 days

alirezaseif28

issue commentReactTraining/react-router

access params in route

:wave: @alirezaseif28, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Please feel free to clarify your issue if you think it was closed prematurely.

alirezaseif28

comment created time in 4 days

startedReactTraining/react-router

started time in 4 days

startedReactTraining/react-router

started time in 4 days

startedReactTraining/history

started time in 4 days

startedReactTraining/history

started time in 4 days

more