Question

我开始认为这将是一个简单的问题；但是我错了。我有以下主页：

import React,{Component} from "react";
import {Link} from "react-router-dom";

const Home = (props) =>{
  return(
    <div>
      <h1>My Portal Home</h1>
      Click <Link to="/login">Here</Link> To Log In.
    </div>
  )
}
export default Home;

我的主要组件是这样的：我确定这不是应该的样子：

import React, {Component} from "react";
import {Router, Route, Link} from "react-router-dom";
import Login from './login/login';
import Home from './home/home';

const Main = (props) =>{
  return(
    <Router>
      <div>
        <Route path="/" component={Home}/>
        <Route path="/login" component={Login}/>
      </div>
    </Router>
  );
};
export default Main;

最后我的索引：

import React from 'react';
import ReactDOM from 'react-dom'

import Main from "./main";
import './index.css';

ReactDOM.render(<Main />,document.getElementById('root'));

当我输入站点地址时，首页不显示，并且出现错误（警告）：

Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
    in Route (at main.js:11)

我显然做错了，但是我的目标是要创建一个主页，并带有指向我的登录页面的链接。非常感谢您的协助。

Answer 1

尝试以下操作：

Main.js

import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import Login from './Login';
import Home from './Home';

const Main = () =>{
  return(
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/login" component={Login}/>
      </div>
    </BrowserRouter>
  );
};
export default Main;

Home.js

import React from "react";
import {Link} from "react-router-dom";

const Home = () =>{
  return(
    <div>
      <h1>My Portal Home</h1>
      Click <Link to="/login">Here</Link> To Log In.
    </div>
  )
};
export default Home;

Login.js

import React from "react";

const Login = () =>{
  return(
    <div>
      Login
    </div>
  );
};
export default Login;

Answer 2

制作一个CodeSandbox，希望这会有所帮助

CodeSandbox

Main.js

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

const Main = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/login">Login</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

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

const Login = () => (
  <div>
    <h2> Login Page </h2>
  </div>
);

export default Main;

ReactJS链接出现问题

2 个答案: