Reactjs-路由在导入的组件上不起作用

我是ReactJS的新手，我正在开发单页应用程序，我只是尝试将我的组件导入到主组件中，但当单击路由链接时，它会显示空白状态或null

src\components\Detail.js

从“React”导入React；
从“react dom”导入react dom；
类详细信息扩展了React.Component{
render（）{
返回(
细节
这是详细信息页。
；
);
}
}
导出默认细节；

上面的模块尝试在App.js中导入以进行路由

App.js

从“React”导入React
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
从“./components/Detail.js”导入{Detail}
常量基本示例=（）=>(

家
关于
细部
话题


)

---

我没有任何错误

当您指定路线配置时，您也需要导入其他组件，

详细信息

是

默认导出

，因此您应该导入不带花括号的

import Home from './components/Home.js'
import About from './components/About.js'
import Detail from './components/Detail.js'
import Topics from './components/Topics.js'

---

有关命名的

和
默认导出的更多信息，请参阅答案
是的，它可以工作，并且可以在导入模块时查看花括号之间的差异。
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import { Detail } from './components/Detail.js'



const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/detail">Detail</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
        <Route path="/detail" component={Detail}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

import Home from './components/Home.js'
import About from './components/About.js'
import Detail from './components/Detail.js'
import Topics from './components/Topics.js'