反应路由器错误"TypeError: Object(...) is not a function"

Question

im当前正在学习反应。在关于路由的课程中，我遇到了这个错误截图我已经确保我写对了代码，并尽我所能找到解决方案大约3个小时了，但我自己无法解决这个问题，所以我正在寻求帮助。

import React from "react";
import "./index.css";
import { BrowserRouter, Route } from 'react-router-dom';
import TwittersView from '../TwittersView/TwittersView';
import ArticlesView from '../ArticlesView/ArticlesView';
import NotesView from '../NotesView/NotesView';
render() {
return (
<BrowserRouter>
<>
<h1>hello world</h1>
<Route exact path="/" component={TwittersView} />
<Route path="/articles" component={ArticlesView} />
<Route path="/notes" component={NotesView} />
</>
</BrowserRouter>
);
}
}
export default Root;

Answer 1

您需要用<Routes>组件包装<Route>组件。

并且react-router-dom、v5和v6具有不同的语法来呈现路由。

以下是react-router-dom v6的示例。

import React from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
const TwittersView = () => {
return <h1>Twitter view</h1>;
};
const ArticlesView = () => {
return <h1>Articles view</h1>;
};
const NotesView = () => {
return <h1>Notes view</h1>;
};
const App = () => {
return (
<BrowserRouter>
<Link to="/">TwittersView</Link> &nbsp;
<Link to="/articles">ArticlesView</Link> &nbsp;
<Link to="/notes">NotesView</Link>
<Routes>
<Route path="/" element={<TwittersView />} />
<Route path="/articles" element={<ArticlesView />} />
<Route path="/notes" element={<NotesView />} />
</Routes>
</BrowserRouter>
);
};
export default App;

Answer 2

组件不再符合react的最新版本。我认为Switch现在不工作了。Routes已经被替换了。不知道为什么这不能反映最新的文档。

import { BrowserRouter, Route, Routes } from 'react-router-dom';
.
.
.
<BrowserRouter>
//Navlink handeling here ie Navbar component with custom css

<Routes>
<Route path='/' element={<ElementName />}/>
<Route path='/aboutus' element={<ElementName />}/>
</Routes>

</BrowserRouter>