Question

我试图做一个项目，不幸的是路由器不起作用..请给我的代码一目了然..任何人都可以得到我的代码的正确问题..这是我的代码.. <登记/> routes.js页面

NSArray *tags = @[@"tag1", @"tag2"];
NSString *tagsString = [tags componentsJoinedByString:@","];
[parameters setValue:tags forKey:@"tags"];

＆安培;这是我的主页.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;

任何人都可以建议任何想法正确地路由到页面..现在只有我有一个空白页面..我想首先加载主页..

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移到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>
  );
}

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

在reactjs中运行时路由故障

1 个答案: