类型上不存在“精确”属性

我试图在我的反应应用程序中使用 react-router-dom，而且我使用的是类型脚本而不是 javascript。这里的问题是我不能在我的组件中导入 Route 并使其工作。我已经安装了 @types/react-router-dom，但由于某些原因，它仍然不能像预期的那样工作。

这是一个试图使用 react-router-dom的组件

import {BrowserRouter as Router, Route} from "react-router-dom";


const App = () => {
return (
<div>
<Router>
<div>
<Route path="/" exact/>
</div>
</Router>
</div>
)
}


export default App;

这就是我得到的错误

TypeScript error in /Users/veselinkontic/Projects/givellet/frontend/src/components/index.tsx(9,37):
Type '{ path: string; exact: true; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.  TS2322


7 |             <Router>
8 |                 <div>
>  9 |                     <Route path="/" exact/>
|                                     ^
10 |                 </div>
11 |             </Router>
12 |         </div>

这是 package.json 文件，您可以在其中看到所有内容。

  "name": "frontend",
"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-dom": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"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"
]
}
}
66791 次浏览
小开
最佳答案

react router v6 doesn't support exact anymore.

// old - v5 <Route exact path="/" component={Home} />

// new - v6 <Route path="/" element={<Home />} />

As stated in their documentation:

You don't need to use an exact prop on <Route path="/"> anymore. This is because all paths match exactly by default. If you want to match more of the URL because you have child routes use a trailing * as in <Route path="users/*">.

You can refer to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5

小开

I have been through this same issue, the new React-Router doesn't support the exact keyword. You can simply remove it from the <Route .../> and it will work just fine.

Also instead of component you have to use element and pass the element tag into it.

小开

I don't know if this keeps happening to you.

But there you have:

"dependencies": {
...
"@types/react-router-dom": "^5.3.2",
...
"react-router-dom": "^6.0.1",
...
},

And maybe the problem is that the version of your react-router-dom and the types are not the same and give compatibility problems. This library has not been updated yet. The same thing happened to me with a project that I just started.

To solve this problem, you can downgrade the version of your react-router-dom to v5 and work under that syntax, or wait for the update of the types and use the most recent version. Keep in mind that there are important changes in v6 and updating when you have a lot of code could be complicated.

Likewise, the previous answers are correct, exact does not exist in the new v6 of react-router.

Here you can see the current version of the types: https://www.npmjs.com/package/@types/react-router-dom

小开

In the case of React Router v6, I add Routes and Route to the import.

Example:

import { BrowserRouter, Route, Routes  } from 'react-router-dom';
import  Home  from "./pages/Home";
import  NewRoom  from "./pages/NewRoom";
    

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/"  element={<Home />}/>
<Route path="/rooms/new" element={<NewRoom />}/>
</Routes>
</BrowserRouter>
);
}
    

export default App;
小开

what worked for me was re-installing the package npm install react-router-dom

小开

Just replace exact with end.

Rename <NavLink exact> to <NavLink end>. https://reactrouter.com/en/v6.3.0/upgrading/v5#rename-navlink-exact-to-navlink-end


提交答案