无法路由到loginform

Question

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



class HomePage extends Component {
   render() {
      return (
       <div className="backgrnd" >

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

       <h3 className="outside"><marquee> 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/>

      <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/loginForm" component={LoginForm}/>
      <Route path="/companies" component={Companies}/>
      <Route path="/services" component={Services}/>
      <Route path="/contact" component={Contact}/>
      </Switch>
    </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 howel 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"><div className="blink"><span>Today's Highest Closing Company </span></div><b>*Tata </b></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;

这是我的Homepage.js我想点击登录按钮后转到登录页面。与约和公司相同，但它不起作用。该页面仍然在主页中加载..它没有重定向到任何其他页面。我需要在我的代码中进行哪些更改才能正常运行？我的代码有什么问题吗？这是我的项目路径：

我想在LoginForm文件夹中路由到LoginForm.js。是否需要更改任何其他页面中的代码？有人愿意帮我吗？它变得非常轻松......

这也是我的index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router,Switch, Route, Link } from "react-router-dom";

import { Provider } from 'react-redux';
import store from './redux/store';
import HomePage from './components/HomePage/HomePage';

ReactDOM.render(
  <Provider store={store}>
  <HomePage/>

  </Provider>,
  document.getElementById('root')
);

也是我的About.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './About.css';



class About extends Component {
    render(){
        return(
            <p>Here we are giving a complete view of all growing technical companies in European Countries those which are registered under our site. We assure this site are very useful and time saving for your bright future..We hope you enjoy browsing through our area..</p> 
            );
    }
}
export default About;

LoginForm.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';



class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
          <div>

         <header>
   <h1>Company Login</h1>
   </header>
      <form name="loginForm" onSubmit={this.onSubmit}>

        <div className="imgcontainer">
    <img src="avatar.png" alt="Avatar" className="avatar"/>
  </div>

        <div className="form-group-collection">
          <div className="form-group">

            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>


          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>
        <br/>

        <input type="submit" value="Login" />

  </form>
     <footer>Copyright &copy; multihands.com. </footer>
     </div> 
    )
  }






  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Answer 1

尝试从路径

中删除两个点..

<MenuLink to="/LoginForm" label="LoginForm" />
<Route path="/LoginForm" component={Login}/>

Answer 2

您的path={}和to={}与文件夹层次结构无关，它们代表网址中的内容。如果您希望将用户定向到＆＃34; localhost：3000 / loginform＆＃34;你的＆＃39;到＆＃39;将是to="/loginform"。

所以路由器的示例如下：

<Router>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/loginform" component={Login}/>
    <Route path="/gallery" component={Gallery}/>
    <Route path="/contact" component={Contact}/>
</Router>

然后在某处创建链接，例如：

<div className="menu">
    <Link to="/loginform">Login</Link>
    <Link to="/home">Home</Link>
    //...and so on...
</div>

编辑 - 新的路由器示例：

<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/>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/loginform" component={LoginForm}/>
            <Route path="/companies" component={Companies}/>
            <Route path="/services" component={Services}/>
            <Route path="/contact" component={Contact}/>
        </Switch>
    </div>
</Router>