在 reactjs 中运行时出现路由问题

Question

我正在尝试做一个项目，不幸的是路由器不起作用..请给我的代码您的好意。任何人都可以得到我的代码的正确问题..这是我的代码.. routes.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'.

另外，从homepage.js 中删除您的Router 并将Routes 移动到您的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>
  );
}

还要确保将这些组件也导入/移动到那里。