0

У меня есть минимальное react приложение. По отдельности все компоненты работают. Сейчас пыталась сделать переадресацию используя Routers, но что-то не так. У меня не загружается даже домашняя страница с минимальным наполнением, не говоря уже о не работающей переадресации.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="all"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; 
// import Login from "./components/auth/Login"

const all = ReactDOM.createRoot(document.getElementById('all'));
all.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import Home from "./components/Home"
import Login from "./components/auth/Login"
import CreatePost from "./components/posts/post_posts"
import GetPosts from './components/posts/get_posts';
import {Route, Routes, Router} from 'react-router';

import {useState} from 'react';
import React from 'react';

function App() {
  const [token, setToken] = useState();
  <Router>
    <Routes>
      <Route path='/' element={<Home></Home>}/>
      <Route path='/api/posts' element={<GetPosts></GetPosts>}/>
      <Route path='/api/posts/' element={<CreatePost token={token} ></CreatePost>}/>
      <Route path='/api/auth/login' element={<Login  setToken={setToken}></Login>}/>
    </Routes>
  </Router>
}

export default App;

Home.jsx

const Home = () => {
    return(
        <div>
            <button > Login</button>
        </div>
    )
}

export default Home

Оно должно отрисовать хоть бы Home, но и этого нет.

1
  • Я может чего не вижу, но где подключение скриптов к index.html?
    – SwaD
    29 окт 2022 в 13:48

1 ответ 1

0

В компоненте <App/> вы забыли написать return


function App() {
  const [token, setToken] = useState();
  return <Router>
    <Routes>
      <Route path='/' element={<Home></Home>}/>
      <Route path='/api/posts' element={<GetPosts></GetPosts>}/>
      <Route path='/api/posts/' element={<CreatePost token={token} ></CreatePost>}/>
      <Route path='/api/auth/login' element={<Login  setToken={setToken}></Login>}/>
    </Routes>
  </Router>
}
5
  • Не играет роли, что-так, что так не работает. Просто пустой div из index.html
    – Stanislava
    29 окт 2022 в 9:19
  • Дополнил ответ, посмотри
    – Sergey
    29 окт 2022 в 9:20
  • Да. исправила так, как ты сказал, то итог тот же. Ошибок нет, всё вроде хорошо, но когда открываешь страницу в браузере(которая автоматически открывается при запуске проекта), там просто пустая страницы, при просмотре кода, оказывается, что там просто div из index.html, как и ранее
    – Stanislava
    29 окт 2022 в 9:26
  • А по другим роутам?
    – Sergey
    29 окт 2022 в 9:38
  • Я нашел проблему, изменил ответ. Если помог, можно его отметить как верный
    – Sergey
    29 окт 2022 в 9:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.