Reactjs - 路由不适用于导入的组件

Question

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

src\components\Detail.js

import React from 'react';
import ReactDOM from 'react-dom';

class Detail extends React.Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Detail</h2>
        </div>
        <p>This is the Detail page.</p>;
      </div>
    );
  }
}

export default Detail;

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

App.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>
)

我没有任何错误。

Answer 1

当你指定一个路由配置并且Detail是一个default export时你也需要导入其他组件所以你应该导入without curly braces

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

请参阅 this 答案以获取有关named 和Default export 的更多信息