2

I'm new to ReactJS and i am developing single page app and I'm just trying to import my components to main component but while clicking on route link it showing blank state or 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;

Above module trying to import in App.js for routing

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

I've not got any errors.

Rahul Shinde
  • 168
  • 3
  • 12

1 Answers1

1

You need to import the other components too when you specify a route configuration and Detail is a default export so you should import 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'

Refer this answer for more info on named and Default export

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400