2

I need to get history object. I am using version 6 of react-router-dom & I also installed react-router v6. Here this is my code of one class component.

import React, { Component } from 'react'
import { withRouter } from 'react-router'

class Blog extends Component {
    render() {
        console.log(this.props)
        return (
            <div>
                <h4>History</h4>
            </div>
        )
    }
}
const B = withRouter(Blog)
export default B

& I import it to another component.

import React, { Component } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import B from './pages/Blog'

class Lesson2 extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <h4>Lesson 2</h4>
                    <MainNav />
                    <Routes>
                        <Route path='/blog/' element={<B />}/>
                    </Routes>
                </div>
            </BrowserRouter >
        )
    }
}

export default Lesson2

I am getting error Attempted import error: 'withRouter' is not exported from 'react-router' Although I install both react-router & react-router-dom.

mrhrifat
  • 65
  • 1
  • 7
  • If you need help creating either the new custom router or new `withRouter` HOC, or getting them to work, then post a new question with the attempt and relevant details about what *specifically* isn't working. Feel free to ping (@ me) in a comment here with a link to the new question. – Drew Reese Nov 24 '21 at 16:57
  • I think, The solution is to do create an another functional components with `withRoute` and send this class components to that functional component. and Import that functional component. I don't know am I right or wrong but I can't implement this. Will you help me to do this in my github code please. Fork my code and after do changes contribute this. Please. I' m trying to solve this from last 3 days. @DrewReese – mrhrifat Nov 24 '21 at 17:33
  • I don't think you need to create a new function component other than the new router for the custom `history` object you want to use outside the UI code. The `withRouter` HOC should be a direct replacement for the v4/5 `withRouter` component, or to wrap components previously directly rendered by a v4/5 `Route` and receiving the route props. If you've given this a solid try, then please update your question here to include the attempt so we can see what the code is doing, and mark to "reopen". – Drew Reese Nov 24 '21 at 19:36
  • @DrewReese I have edited my code with an simple example but, still I am getting error. I also try to get without decalred `const B` but can't resolve. This example I have see in react-router documentation https://v5.reactrouter.com/web/api/withRouter Please help to get rid from it. – mrhrifat Nov 27 '21 at 05:49
  • Did you understand the explanations and solutions in the linked questions? RRDv6 no longer exports a `withRouter` HOC, so you need to create one if you need routing props to be injected. If you are using version 6 then you can't reference the v5 docs as they are much different. If you want to jut use v5 then you need to install a v5.x version of `react-router-dom` from npm. – Drew Reese Nov 28 '21 at 20:36
  • Sorry, for the wrong explanation. Actually I didn't find how to with `withRouter` in RRDv6. I just need `history` object in Class Component anyhow. I can get it easily with v4 but my soul don't satisfy with it. That's why I am asking to you to help, How can do it. – mrhrifat Nov 29 '21 at 12:47
  • Follow the solution [here](https://stackoverflow.com/a/70000286/8690857) to create a custom router to handle a custom `history` object that you can export/import around your app. If this solution is insufficient for your needs then may I ask you to update your question with a more representative code example for what you are trying to, and what you've done already in attempting to access a `history` object? Depending on what it is you are *actually* trying to do there may be other alternatives. – Drew Reese Nov 29 '21 at 18:04

0 Answers0