Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

react-router-dom v 6.x? #266

Closed
Closed
@sheam

Description

When I try to run this with react-router-dom vs 6.0.1 I get the following compile error:

TypeError: (0 , _reactRouterDom.withRouter) is not a function
./node_modules/react-router-bootstrap/lib/LinkContainer.js
C:/Users/sheam/Code/hs-image-manager/node_modules/react-router-bootstrap/lib/LinkContainer.js:155
 152 | strict: false,
 153 | activeClassName: 'active'
 154 | };
> 155 | exports.default = (0, _reactRouterDom.withRouter)(LinkContainer);
View compiled
__webpack_require__
C:/Users/sheam/Code/hs-image-manager/webpack/bootstrap:856
 853 | 
 854 | __webpack_require__.$Refresh$.init();
 855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
 | ^ 857 | } finally {
 858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
 859 | }
View compiled

My code looks like this:

function App()
{
 return (
 <div className="App">
 <Router>
 <Navbar bg="light" expand="lg">
 <Container>
 <Navbar.Brand href="#home">HS Image Manager</Navbar.Brand>
 <Navbar.Toggle aria-controls="basic-navbar-nav"/>
 <Navbar.Collapse id="basic-navbar-nav">
 <Nav className="me-auto">
 <LinkContainer to="/">
 <Nav.Link>Upload</Nav.Link>
 </LinkContainer>
 <LinkContainer to="/manage">
 <Nav.Link>Manage</Nav.Link>
 </LinkContainer>
 </Nav>
 </Navbar.Collapse>
 </Container>
 </Navbar>
 <Routes>
 <Route path="/" element={<UploadPage/>}/>
 <Route path="/manage" element={<ManagePage/>}/>
 </Routes>
 </Router>
 </div>
 );
}

I am using CRA typescript template and my package.json looks like this:

{
 "name": "hs-image-manager",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@testing-library/jest-dom": "^5.11.4",
 "@testing-library/react": "^11.1.0",
 "@testing-library/user-event": "^12.1.10",
 "@types/jest": "^26.0.15",
 "@types/node": "^12.0.0",
 "@types/react": "^17.0.0",
 "@types/react-dom": "^17.0.0",
 "@types/react-router-bootstrap": "^0.24.5",
 "bootstrap": "^5.1.3",
 "react": "^17.0.2",
 "react-bootstrap": "^2.0.2",
 "react-dom": "^17.0.2",
 "react-router-bootstrap": "^0.25.0",
 "react-router-dom": "^6.0.1",
 "react-scripts": "4.0.3",
 "sass": "^1.43.4",
 "typescript": "^4.1.2",
 "web-vitals": "^1.0.1"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 },
 "eslintConfig": {
 "extends": [
 "react-app",
 "react-app/jest"
 ]
 },
 "browserslist": {
 "production": [
 ">0.2%",
 "not dead",
 "not op_mini all"
 ],
 "development": [
 "last 1 chrome version",
 "last 1 firefox version",
 "last 1 safari version"
 ]
 }
}

Is this compatible with RRD 6+?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /