Enter link in URL does not load page

Asked

Viewed 788 times

2

I have a strange problem. I’m browsing a SPA using React router v4, it’s working if vc starts the root navigation, but if vc type the address directly in the URL it gives an error.

Below is the code of the relevant parts and the image with the error.

index.jsx

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import App from './main/app'

ReactDom.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('app'))

app.jsx

import React from 'react'

import Header from '../layout/header'
import SidebarLeft from '../layout/sidebarLeft'
import Center from '../layout/center'
import SidebarRight from '../layout/sidebarRight'

class App extends React.Component {
    render() {
        return (
            <div>
                <Header />
                <main>
                    <SidebarLeft />
                    <Center />
                    <SidebarRight />
                </main>
            </div>
        )
    }
}

export default App

center.jsx

import React from 'react'
import { Route, Redirect, Switch } from "react-router-dom";

import Dashboard from '../pages/dashboard/dashboard'
import Gates from '../pages/gates/gates'
import Doors from '../pages/doors/doors'
import Lights from '../pages/lights/lights'
import Garden from '../pages/garden/garden'
import Agenda from '../pages/agenda/agenda'
import Activities from '../pages/activities/activities'


const page404 = ({ location }) => (
    <div>
        <h1>404 Error</h1>
        <h2>Page not found!</h2>
        <code>{location.pathname}</code>
    </div>
)


class Center extends React.Component {
    render() {
        return (
            <div className="center">
                <Switch>
                    <Route path='/admin/dashboard' component={Dashboard} />
                    <Route path='/admin/gates' component={Gates} />
                    <Route path='/admin/doors' component={Doors} />
                    <Route path='/admin/lights' component={Lights} />
                    <Route path='/admin/garden' component={Garden} />
                    <Route path='/admin/agenda' component={Agenda} />
                    <Route path='/admin/activities' component={Activities} />
                    <Route render={page404} />
                </Switch>
            </div>
        )
    }
}

export default Center

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <base href="/">

    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">

    <link rel="stylesheet" href="/app.css">

    <!-- Temporario -->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700,900" rel="stylesheet">

    <title>NK</title>
</head>

<body>
    <noscript>
        Você precisa do Javascript habilitado para funcionar
    </noscript>
    <div id="root"></div>
    <script src="app.js"></script>
</body>

</html>
react
  • 1

    Maybe it’s the lack of defining the tag <base href="/"> in the archive index.html

  • How are you including the app? Cade o index.html? How are you serving the file?

  • made an edit and put index.html in the post, @wmsouza’s suggestion resolved. I’m using webpack-dev-server.

1 answer

0

You are in the browser and not on the server (server-render) so you need to use Hashrouter instead of Browserrouter

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.