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

Question

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

SRC \组件\ 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'

有关named和Default export

的更多信息，请参阅 this 答案