Блог

Я использую маршрутизатор React с тегом Link для обработки маршрутизации между страницами в моем приложении. Ну, когда я нажимаю на домашнюю страницу с целевой страницы, URL-адрес меняется, но DOM не показывает никакого кода, который у меня есть для домашнего компонента, также я не получаю никаких ошибок, и домашняя страница просто пуста. Я включил код для своего Index.js и App.js так что вы можете видеть. Просто примечание, я использую react-router-dom версии 5.2.0 и react-redux версии 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 path, которой не существует в вашем приложении.

 <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>
  );
}