Я пытаюсь настроить маршрутизацию, но по какой-то причине он возвращает пустую страницу и ничего не отображает.
Я использую роутер версии 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-адресу. Что мне не хватает?
что вы имеете в виду под точным реквизитом? я пою роутер 6.3.0
Чтобы соответствовать реквизиту пути или вернуться к 404, вы не указали 404, поэтому, возможно, он показывает белый экран. v5.reactrouter.com/web/api/Route/exact-bool
Поскольку вы используете v6, вам нужно передать свой компонент реквизитам элемента, а не дочерним элементам. reactrouter.com/docs/en/v6/getting-started/…
В 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;
все равно ничего не возвращает хм
не могли бы вы поделиться своим файлом package.json?
В 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;
Поскольку 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;
Попробуйте передать точные реквизиты компоненту Route, а также сообщите нам версию react-router-dom.