React: Redirect withRouter causes Warning: React does not recognize the `staticContext` prop on a DOM element [duplicate]

Asked
Active3 hr before
Viewed126 times

6 Answers

elementreact
90%

Is it safe to screw into a single support beam holding up an entire house? , Is it possible for user written algorithms to outperform libraries' built-in optimized functions? ,Connect and share knowledge within a single location that is structured and easy to search.

There is a way to overcome that is using:

const {
   to,
   staticContext,
   ...rest
} = this.props;
load more v
88%

Apply withRouter to a <Link /> element,Click the link to "Course 1" and open browser console. See React-thrown error.,The staticContext prop is passed to the <a /> element causing a console error

  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
72%

This is a common problem with a simple solution as documented in the React documentation:,The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.,The given answer by the React docs was not quite good enough for my situation, so I found/developed one which isn't perfect, but is at least not so much of a hassle.

There is a way to overcome that is using:

const {
   to,
   staticContext,
   ...rest
} = this.props;
load more v
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Now if you test out this setup ($ yarn run dev), you’ll see that everything is working as expected and our routes are being server-side rendered.,So with renderRoutes our App component changes to this simpler version instead:,If you ever need a good reference for what we did here, have a look at the Server Rendering section of the React Router docs.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Pretag
 Pretag team - issue, fix, solve, resolve

Other "element-react" queries related to "React: Redirect withRouter causes Warning: React does not recognize the `staticContext` prop on a DOM element [duplicate]"