我使用带有 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>
)
}
}
答案 0 :(得分:0)
请检查你的 app.js 你的主页组件在 /HomePage 你正试图把它放在 /home
},
series: [{
name: chartSeries.success.name,
data:
chartSeries.success.data,
accessibility: {
description: 'This is the required chart'
}
},
在着陆页中,您正尝试在 /home 路径中获取主页,而该路径在您的应用中不存在。
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/HomePage' component={HomePage} />
</Switch>
</BrowserRouter>
</div>
);
}
而您的组件位于“ /HomePage ”
解决办法: 将 App.js 中的路径从 /HomePage 更改为 /home
<Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>