Маршрутизация возвращает белую страницу в React.js

Я пытаюсь настроить маршрутизацию, но по какой-то причине он возвращает пустую страницу и ничего не отображает.

Я использую роутер версии 6.3.0

// index.js

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

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

// --------------------------------------------- //

// App.js

import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Header />
            <Route path = "/landing">
                <Landing />
            </Route>
        <Footer />
      </Fragment>
    );
  }
}

export default App;


// --------------------------------------------- //

// Landing.js

import Body from './Body'

function Landing(props) {
    return (
        <Body>
            <div className = "Landing">
              Landing Context
            </div>
        </Body>
    )
}

export default Landing;

Поэтому, когда я захожу http://localhost:3000/landing, ничего не отображается, и когда я пытаюсь http://localhost:3000, тоже ничего не отображается.

Если я удалю часть <Route></Route> в App.js, она отобразится, но по любому URL-адресу. Что мне не хватает?

Попробуйте передать точные реквизиты компоненту Route, а также сообщите нам версию react-router-dom.

Rajendran Nadar 02.04.2022 14:20

что вы имеете в виду под точным реквизитом? я пою роутер 6.3.0

Jonas 02.04.2022 14:28

Чтобы соответствовать реквизиту пути или вернуться к 404, вы не указали 404, поэтому, возможно, он показывает белый экран. v5.reactrouter.com/web/api/Route/exact-bool

Rajendran Nadar 02.04.2022 14:35

Поскольку вы используете v6, вам нужно передать свой компонент реквизитам элемента, а не дочерним элементам. reactrouter.com/docs/en/v6/getting-started/…

Rajendran Nadar 02.04.2022 14:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
61
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

В app.js оберните свой маршрут в маршрутизатор, как это

import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Header />
            <Router>
              <Route path = "/landing">
                <Landing />
              </Route>
            </Router>
        <Footer />
      </Fragment>
    );
  }
}

export default App;

все равно ничего не возвращает хм

Jonas 02.04.2022 14:22

не могли бы вы поделиться своим файлом package.json?

Yousuf Kalim 02.04.2022 14:38

В react-router v6 есть некоторые критические изменения, он заменил Switch на компонент Routes:

/ index.js

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

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

// --------------------------------------------- //

// App.js

import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
            <Header />
                <Routes>  
                    <Route path = "/landing" element = {<Landing />}/>
                </Routes>
            <Footer />
      </Fragment>
    );
  }
}

export default App;

https://reactrouter.com/docs/en/v6/начало работы/обзор

Ответ принят как подходящий

Поскольку OP использует react-router-dom v6

Вместо дочерних элементов ожидается, что свойства элемента будут отображать компонент.

https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

Если вы используете версию реактивного маршрутизатора < 6, вам нужно добавить элемент Switch, импортированный из реактивного маршрутизатора, над вашим элементом маршрута -

// App.js


import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Switch>
            <Route path = "/landing">
                <div>On LAnding Page</div>
            </Route>
          </Switch>
      </Fragment>
    );
  }
}

export default App;

И если вы используете react-router> 6, вам нужно заменить Switch на Routes и поместить компонент, который вы хотите отобразить, внутри свойства элемента Route . Код должен быть похож на следующий:

// App.js


import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Routes>
            <Route path = "/landing" 
              element = {<div>On Landing Page</div>}>
            </Route>
          </Routes>
      </Fragment>
    );
  }
}

export default App;

Другие вопросы по теме