-2

estou começando a estudar sobre programação, não entendo quase nada.

Recentemente vi video sobre criar web site com react usando API do TMDB.

Fiz os procedimentos do video, porém ele está desatualizado. Configurei o route e a pagina fica completamente em branco.

link do repositório:https://github.com/trananhtuat/react-movie

Este é o App.js

import { Router, Routes, Link } from 'react-router-dom';
import RouteComponent from './config/Routes';

function App() {
    return (
      <Router>
        <div className="App">
        <RouteComponent />
        </div>
      </Router>
    );
  }
  

  export default App;

Este é o Route.jsx

import React from 'react';

import { Route, Router, Routes } from 'react-router-dom';

import Home from '../pages/Home';
import Catalog from '../pages/Catalog';
import Detail from '../pages/detail/Detail';

const RouteComponent = () => {
    return (
        <>
<Router>
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/:category/search/:keyword" element={<Catalog />} />
    <Route path="/:category/:id" element={<Detail />} />
</Routes>
</Router>
</>
    
    )
}

export default RouteComponent;

Está é a página Home

import React from 'react';
import { Link } from 'react-router-dom';

import { OutlineButton } from '../components/button/Button';
import HeroSlide from '../components/hero-slide/HeroSlide';
import MovieList from '../components/movie-list/MovieList';

import { category, movieType, tvType } from '../api/tmdbApi';

const Home = () => {
    return (
        <>
            <HeroSlide/>
            <div className="container">
                <div className="section mb-3">
                    <div className="section__header mb-2">
                        <h2>Trending Movies</h2>
                        <Link to="/movie">
                            <OutlineButton className="small">View more</OutlineButton>
                        </Link>
                    </div>
                    <MovieList category={category.movie} type={movieType.popular}/>
                </div>

                <div className="section mb-3">
                    <div className="section__header mb-2">
                        <h2>Top Rated Movies</h2>
                        <Link to="/movie">
                            <OutlineButton className="small">View more</OutlineButton>
                        </Link>
                    </div>
                    <MovieList category={category.movie} type={movieType.top_rated}/>
                </div>

                <div className="section mb-3">
                    <div className="section__header mb-2">
                        <h2>Trending TV</h2>
                        <Link to="/tv">
                            <OutlineButton className="small">View more</OutlineButton>
                        </Link>
                    </div>
                    <MovieList category={category.tv} type={tvType.popular}/>
                </div>

                <div className="section mb-3">
                    <div className="section__header mb-2">
                        <h2>Top Rated TV</h2>
                        <Link to="/tv">
                            <OutlineButton className="small">View more</OutlineButton>
                        </Link>
                    </div>
                    <MovieList category={category.tv} type={tvType.top_rated}/>
                </div>
            </div>
        </>
    );
}

export default Home;

1 Resposta 1

-1

Opa cheguei tarde, tenta isso.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';

...
return (
  <BrowserRouter>
    <Routes>
      <Route path='/home' element={<Home />} />
    </Routes>
  </BrowserRouter>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .