我正在尝试react-router-dom在我的 React 应用程序中使用它,而且我使用的是 Typescript 而不是 JavaScript。这里的问题是我无法将 Route 导入我的组件并使其工作。我已经安装了,@types/react-router-dom但由于某种原因,它仍然无法按预期工作。
react-router-dom
@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" ] } }
react router v6 不再支持exact。
exact
// 旧版 - v5 <Route exact path="/" component={Home} />
<Route exact path="/" component={Home} />
// 新 - v6 <Route path="/" element={<Home />} />
<Route path="/" element={<Home />} />
正如他们的文档所述:
您不再需要使用 exact prop <Route path="/">。这是因为默认情况下所有路径都完全匹配。如果您因为有子路由而想要匹配更多 URL,请使用尾随 *,如<Route path="users/*">。
<Route path="/">
<Route path="users/*">
您可以参考此迁移指南:https://reactrouter.com/en/main/upgrading/v5