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

Posted 2023-02-23

【中文标题】Reactjs - 路由不适用于导入的组件

【英文标题】：Reactjs - Routing is not work on imported component

【发布时间】：2017-10-22 04:59:18

【问题描述】：

我是 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>
)

我没有任何错误。

【参考方案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 的更多信息

【讨论】：

是的，它可以工作，并且在导入模块时可以看到大括号之间的区别。