Question

现在已经过去一个小时了，即使阅读了无数页，我也不知道如何导入 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'

我得到了错误

<块引用>

尝试导入错误：“Switch”未从“react-router-dom”导出。我已经尝试了更多，但不值得在这里发布。另外，如果重要的话，这是我的版本。

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

如何正确导入所有这三项内容？

Answer 1

如果您在 index.js 中使用 <BrowserRouter> 周围的 <App>（就像您的情况一样），您可以直接在子组件中使用 <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>

如何正确导入“路由、路由器和交换机”

1 个答案: