无法使用React Router渲染组件

debugcn 发表于 Dev

西

我正在使用带有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>
        )
    }
}

巴达尔夏尔巴人

请检查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>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。