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
<!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>
Maybe it’s the lack of defining the tag
<base href="/">
in the archive index.html– NoobSaibot
How are you including the app? Cade o index.html? How are you serving the file?
– nbkhope
made an edit and put index.html in the post, @wmsouza’s suggestion resolved. I’m using webpack-dev-server.
– André Agenor