如何正确导入"Route, Router and Switch"

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;

这样做，我得到

You cannot render a inside another . You never need more than one. Even though I dont.

所以我尝试以不同的方式导入它。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

我得到了错误

Attempted import error: 'Switch' is not exported from 'react-router-dom'. I've tried many more, but it's not worth posting here. Also if it matters, here is my versions.

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

如何正确导入所有这三个东西？

Answer 1

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

如何正确导入"Route, Router and Switch"

How to import "Route, Router and Switch" correctly

javascript

router

reactjs