Маршруты React без рендеринга компонентов
В настоящее время я работаю над приложением React, в котором для навигации использую React Router. Однако я столкнулся с проблемой, когда компоненты, связанные с маршрутами, не отображаются должным образом.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
document.addEventListener('DOMContentLoaded', () => {
const rootElement = document.getElementById('root');
if (rootElement) {
ReactDOM.render(
<Router>
<Routes>
<Route path = "/" element = {<App />} />
</Routes>
</Router>,
rootElement
);
document.body.appendChild(document.createElement('div'));
}
});
Приложение.js
import React from "react"
import {Route, Routes, } from "react-router-dom"
import Gyms from "./Gyms/Gyms"
import Gym from "./Gym/Gym"
const App = () => {
return (
<Routes>
<Route path = "/" component = {Gyms}/>
<Route path = "/gyms/:slug" component = {Gym}/>
</Routes>
)
}
export default App;
Gym.js
import React from 'react'
const Gym = () => {
return <div>This is the Gym#show view for our app.</div>
}
export default Gym
Gyms.js
import React from 'react'
const Gyms = () => {
return <div>This is the Gyms#index view for our app.</div>
}
export default Gyms
Несмотря на настройку маршрутов, как указано выше, когда я перехожу к маршрутам, я не вижу ожидаемого рендеринга компонентов. Вместо этого я просто вижу пустую страницу.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
В React Router v6 изменился способ указания компонентов для маршрутов. Вместо использования реквизита component теперь вы используете реквизит element и передаете компонент как JSX.
Вот как вы можете настроить свой App.js в соответствии с соглашениями React Router v6:
import React from "react";
import {Routes, Route } from "react-router-dom";
import Gyms from "./Gyms/Gyms";
import Gym from "./Gym/Gym";
const App = () => {
return (
<Routes>
<Route path = "/" element = {<Gyms/>}/>
<Route path = "/gyms/:slug" element = {<Gym/>}/>
</Routes>
);
}
export default App;
есть ли ошибки в консоли?
нет :/ ничего нет
Кажется, проблема с вашим файлом index.js. Я использовал базовый шаблон codeandbox для реакции, который содержит определенный индексный файл.
import React from "react";
import ReactDOM from "react-dom";
import App from "./app";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
Наряду с этим передайте элемент, предложенный @Puttsche, как показано ниже.
<Route path = "/" element = {<Gyms/>}/>
И это сработало для меня. Вот рабочий пример песочницы с вашим кодом.
не могли бы вы перелинковать песочницу? это не работает :/
Можете ли вы сказать мне, с какой проблемой вы столкнулись при перенаправлении на него? Поскольку это работает для меня. Все еще добавляю это в основной ответ.
Песочница не найдена.
Можете ли вы проверить сейчас, обнародовал это. И если это решило вашу проблему, пожалуйста, примите ответ.
Я думаю, вы могли бы изменить свой код в index.js на:
import {createBrowserRouter, RouterProvider,} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Gyms/>,
},
{
path:"/gyms/:slugs",
element:<Gym/>
}
]);
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<RouterProvider router = {router} />
</React.StrictMode>,
rootElement
);
В индексном компоненте:
document.addEventListener('DOMContentLoaded', () => {
const rootElement = document.getElementById('root');
if (rootElement) {
ReactDOM.render(
<App />,
rootElement
);
document.body.appendChild(document.createElement('div'));
}
});В компоненте приложения:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const App = () => {
return (
<Router>
<Routes>
<Route path = "/" element = {<Gyms />}/>
<Route path = "/gyms/:slug" element = {<Gym />}/>
</Routes>
</Router>
)
}
Спасибо, но всё равно не работает :/