Typing link in URL does not load page

Navigation
0

I have a strange problem. I am browsing a SPA using react router v4, it is working if you start the root navigation, however if you enter the direct address in the URL it gives an error.

Below is the code for 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


<!DOCTYPEhtml><htmllang="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>
    
asked by anonymous 04.04.2018 / 03:49

1 answer

0

You are in the browser rather than the server (server-render) so you need to use HashRouter instead of BrowserRouter

    
17.04.2018 / 23:59
Dynamic Reports page reports very large Class to fetch JSON with variable URL