如何正确导入“路由、路由器和交换机”
如何正确导入“路由、路由器和交换机”
提问于 2021-07-14 19:49:25
现在已经一个小时了，我甚至在看了无数页之后也搞不懂如何导入Router、Route和Switch。
我的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import './NavImages.css'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);我的app.js
import React, { Component } from 'react';
import Home from './Home';
import Settings from './Settings';
import Info from './Info'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Switch } from "react-router";
class App extends Component {
render() {
return (
<div className="app">
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/settings" component={Settings}/>
<Route exact path="/info" component={Info}/>
</Switch>
</Router>
</div>
);
}
}
export default App;做这件事，我
，您不能在另一个内部呈现。你从来不需要不止一个。即使我没有。
所以我试着用另一种方式导入它。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'我得到了错误
试图导入错误：“交换机”不是从“react router”导出的。我试过很多次了，但这不值得在这里张贴。如果有关系的话，这是我的版本。
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",如何在没有错误的情况下导入所有这三件事？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-14 20:12:14
如果您在您的<BrowserRouter>中使用<App>周围的index.js (就像在您的例子中那样)，您可以直接在子组件中使用<Switch>。
确保正确地import组件(Route来自react-router，Switch来自react-router-dom)。
// imports
import { Route } from "react-router";
import { Switch } from "react-router-dom";
// render
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/settings" component={Settings}/>
<Route exact path="/info" component={Info}/>
</Switch>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68384258
复制相关文章
相似问题
腾讯云开发者
