组件不使用反应路由器渲染

Question

我正在使用带有 Link 标签的 React Router 来处理我的应用程序页面之间的路由。好吧，当我从登录页面单击主页时，URL 会发生变化，但 DOM 没有显示我为主页组件拥有的任何代码我也没有收到任何错误，主页只是空白。我已经包含了我的 Index.js 和 App.js 的代码，所以你可以看到。顺便说一句，我正在使用 react-router-dom V 5.2.0 和 react-redux V 7.2.2。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, document.getElementById('root')
);
reportWebVitals();

App.js

import React from 'react';
import { Route, BrowserRouter, Switch, withRouter} from 'react-router-dom';



//COMPONENTS IMPORTS 
import LandingPage from './components/LandingPage';
import HomePage from './components/HomePage';




function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path= "/" component = {LandingPage} />
          <Route exact path = "/HomePage" component ={HomePage} />
        </Switch>
      </BrowserRouter>
    </div>
  )
}

export default withRouter (App);

登陆页面

//tools import
import React, { Component } from 'react'
import { Link } from 'react-router-dom';

//css Import
import '../App.css';

//Animation Import
import Anime from 'react-anime';

//Image Imports
import silentCareLogo from '../Images/silentCareLogo.png';

// React-icons//
import {BsArrowRightShort} from "react-icons/bs";


export default class landingPage extends Component {
    render() {
        return (
            <div className="landingContainer">
                <div className="logoContainer">
                    <Anime className = "animeDiv" opacity = {[0,1]} duration={25000}>
                        <img src={silentCareLogo} className="companyLogo" alt="logo" />
                    </Anime>
                    <Anime className="animeHmeBtnDiv" opacity = {[0,1]} duration={20000} delay={2000}>
                        <Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>
                    </Anime>
                </div>
            </div>
        )
   

主页

import React, { Component } from 'react'

//css Import
import '../App.css';

//Animation Import
import Anime from 'react-anime';

export default class HomePage extends Component {
    render() {
        return (
            <div>
                <div className ="homeContainer">
                    <h1>home page</h1>
                </div>
            </div>
        )
    }
}

Answer 1

请检查你的 app.js 你的主页组件在 /HomePage 你正试图把它放在 /home

function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/HomePage' component={HomePage} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

在登陆页面中，您正试图在您的应用中不存在的 /home 路径中获取主页。

<Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>
                    

而您的组件位于“ /HomePage ”中

解决方案： 将 App.js 中的路径从 /HomePage 更改为 /home

function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/home' component={HomePage} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}