проблемы с маршрутизацией при запуске в реакции

Question

Я пытался сделать проект, к сожалению, роутер не работает .. Пожалуйста, взгляните на мой код любезно. Может кто-нибудь узнает, в чем проблема с моим кодом ... вот мой код ..
Страницы rout.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { LoginForm } from './components/LoginForm/LoginForm';
import { About } from './components/About/About';
import { Companies } from './components/Companies/Companies';
import { HomePage } from './components/HomePage/HomePage';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

class Routes extends Component {
    componentDidMount(){
        alert("ok");
    }
   render() {
      return (
        <div>
       <Router> 
        <Switch>
            <Route path="/" component={HomePage}/>
            <Route path="/about" component={About}/>
            <Route path="/loginform" component={LoginForm}/>
            <Route path="/companies" component={Companies}/>

        </Switch>
      </Router>
    </div>
      );
  }
}
export default Routes;

и это моя домашняя страница.js

class HomePage extends Component {
  componentDidMount(){
    alert("hme");
  }
   render() {
      return (
       <div className="backgrnd" >

       <h1><blink> MULTIHAND ONLINE IT WORLD</blink></h1>

       <h3 className="outside"><marquee>It's First Time In India.. New Evolution Rising Up.. Your Complete Business,Carrier & Developing Partner..</marquee></h3>
       <Router>

    <div className="banner">
        <div>
            <ul>
                <li><Link className="a" to='/'>•Home</Link></li>
                <li><Link className="a" to='/about'>•About</Link></li>     
                <li><Link className="a" to='/loginform'>•Login</Link></li>
                <li><Link className="a" to='/companies'>•Companies</Link></li>
                <li><Link className="a" to='/services'>•Services</Link></li>
                <li><Link className="a" to='/contact'>•Contact</Link></li>
            </ul>
        </div>
        <hr/>
        <Route path="/services" component={Services}/>
            <Route path="/contact" component={Contact}/>
    </div>
      </Router>
 </div>

    );
  }
}

const Home = () => (
  <div>
    <h2>Home</h2>
    <div className="wrapper">
    <div className="row">
    <div className="ann"><div className="blink"><span>ANNOUNCEMENTS<br></br></span></div>*New launching of IT company Martl park Solutions in Technopark Thejswani Building 2nd Floor @12.00pm on 12th May 2018</div>
    <div className="ann1"><div className="blink"><span>VACCANCIES </span></div>*No new Openings</div>
    <div className="ann2"><h3 className="blink1"><span>Today's Highest Profit Closing Company </span></h3><b>*Tata Elxsi</b>(Nearer to 2crs.)</div>
    <div className="ann3"><div className="blink"><span>EMERGING TECHNOLOGIES </span></div><div>*java</div><div>*JavaScript</div><div>*C##</div><div>*Python</div><div>*C++</div><div>*C</div></div>
    </div>
    </div>
  </div>
);




const Services = () => (
  <div>
    <h2>Services</h2>
  </div>
);

const Contact = () => (
  <div>
    <h2>Contact Us</h2>
    <h3 className="inside">MULTIHAND ONLINE IT WORLD</h3>
    <h4>Tech Arcade Building </h4>
    <h4>Inside Technopark</h4>
    <h4>Kazhakuttam P.O</h4>
    <h4> Thiruvanathapuram </h4>
    <hr/>
    <h4 className="con"> ☏:- +91-9854631278</h4>
    <h4 className="con"> ✉:- online@multihandworld.com</h4>

  </div>
);

export default HomePage;

Может кто-нибудь предложить любую идею, чтобы правильно направить на страницу .. Теперь только у меня есть пустая страница .. Я хочу загрузить домашнюю страницу в первую очередь ..

Answer 1

Вы импортируете из именованных экспортов на Routes, в то время как вы используете экспорт по умолчанию для ваших реальных компонентов.

Вместо:

import { LoginForm } from './components/LoginForm/LoginForm';

Попробуйте сделать то же самое с остальными:

import LoginForm from './components/LoginForm/LoginForm';

В моем случае, из-за генерации моего проекта с create-react-app, неспособность заметить это приведет к ошибке, подобной этой:

148:112-120 './components/LoginForm/LoginForm' does not contain an export named 'LoginForm'.

Кроме того, удалите Router из homepage.js и переместите Route s в свои routes.js в Switch блок:

render() {
  return (
    <div>
      <Router> 
       <Switch>
        <Route path="/" component={HomePage}/>
        <Route path="/about" component={About}/>
        <Route path="/loginform" component={LoginForm}/>
        <Route path="/companies" component={Companies}/>

        {/*Note services and contact is now in routes.js instead of homepage.js*/}
        <Route path="/services" component={Services}/>
        <Route path="/contact" component={Contact}/>
       </Switch>
     </Router>
    </div>
  );
}

Также убедитесь, что там импортированы / перемещены эти компоненты.