I am playing with react router. I have created a simple app using it.
https://react-04-router.herokuapp.com/
If one click on aboutus or contactus, url is changing and new content is being shown. Everything is working perfectly fine till this point.
But if I refresh on the new link https://react-04-router.herokuapp.com/aboutus. it shows error page as "Not Found".
I have not configured /aboutus route at the server side and I guess this is the reason "Not found" error is coming but this makes me wonder following
If client side routing can not support on refresh, wouldn't it not impact user experience ?
To avoid impact on user experience if I decide to go with server side, I know i would lose faster response of client side routing, other than this, is there anything that I might miss out if I do not use client side routing.
Here is my router file code:
import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import AboutUs from '../presentation/AboutUs';
import ContactUs from '../presentation/ContactUs';
import Home from '../presentation/Home';
import Navbar from '../presentation/Navbar';
class MainLayout extends Component {
render(){
return(
<div >
<Navbar/>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/aboutus' component={AboutUs}/>
<Route path='/contactus' component={ContactUs}/>
</Switch>
</div>
)
}
}
export default MainLayout
And here is app.js file which renders
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import Header from './presentation/Header';
import Footer from './presentation/Footer';
import MainLayout from './layout/MainLayout'
class App extends Component {
render(){
return(
<div className="container-fluid">
<Header />
<MainLayout/>
<Footer />
</div>
)
}
}
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root'))
I would suggest using HashRouter in that case, see Hash Router here
Related
I am trying to make a multi page app with react routing.
I am have some questions as to how I should structure the routing in the react project.
I want to load my component in my app.js file. In my Home component I would like to have the ability to press a button which will take me to the Poems component, I want the code to be clean and structured into components, therefore I dont want to do all this in the app.js file.
If someone would explain to me how to best do this I can from there be able to route around to multiple pages afterwards depending on the page you are on. I dont want to have a global menu currently (I will want that in the Poems component later though).
Here is my current App.js file & Home.jsx component code just for a more easily adjustable experience for you guys!
Currently it is not optimized to work so if anyone knows a good routing solution for my issue, please give me an example of the routing fix.
Thanks alot
/Jacob
import React from 'react'
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'
import './App.scss'
import { Home, Poems, Favourites } from './Pages'
const App = () => {
return (
<Router>
<div className="app">
<Home />
<Routes> {/* I read that the Switch was replaces with Routes */}
<Route path="/" exact component={ Home } />
<Route path="/Poems" component={ Poems } />
<Route path="/Favourites" component={ Favourites } />
</Routes>
</div>
</Router>
)
}
export default App
import React from 'react'
import { Route, BrowserRouter as Router, Routes, Link } from 'react-router-dom'
import { Poems } from './Pages'
import './Home.scss'
const Home = () => {
return (
<Router>
<div>
<h1>Petry For All</h1>
<Routes>
<Route path="/Poems" component={ Poems } />
<Link to="/Poems">Poems</Link>
</Routes>
</div>
</Router>
)
}
export default Home
You don't need to (and actually shouldn't) duplicate the <Router> component in all of the route pages. It is only the root component that is acting as a router. So you can keep the App component the same, and then replace the Home component with the following:
import React from 'react'
import { Poems } from './Pages'
import './Home.scss'
const Home = () => {
return (
<div>
<h1>Petry For All</h1>
<Link to="/Poems">Poems</Link>
</div>
)
}
export default Home
The <Link> component resolves into an anchor element which, when clicked, navigates the user to the route passed into the to property.
Using react-router-dom, components are not displaying inside my embedded router.
Made sure all of the spellings were correct, the components load fine without the router.
import React, { Component } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import Constants from '../helpers/Constants'
import Header from "./Header";
import SideBar from "./SideBar";
import Candidate from "./Candidate";
import Settings from "./Settings";
export default class Base extends Component {
render() {
return (
<div>
<Header/>
<SideBar/>
<div id="app-body">
<Switch>
<Route component={Candidate} exact path="/#candidates"/>
<Route component={Settings} exact path="/#settings"/>
</Switch>
</div>
</div>
)}
}
nothing is visible
I can't get my Router working in react. I am using webpack, thinking I miss some code in webpacn.config.js.
I tried to retype my url to localhost:8080/signin or localhost:8080/signup.
I got en error of
Cannot GET /signin
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'materialize-css/dist/css/materialize.min.css'
import Navbar from './Components/layout//Navbar'
import SignIn from './Components/authentication/SignIn'
import SignUp from './Components/authentication/SignUp'
class App extends React.Component {
constructor() {
super()
}
render() {
return (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route exact path='/signin' component={SignIn} />
<Route exact path='/signup' component={SignUp} />
</Switch>
</div>
</BrowserRouter>
)
}
}
export default App
I think it's not related to Webpack. react's router system handles the routes in client-side so if you want to type URL manually, you should create a fallback URL to root path in the back-end side (based on your back-end tech) then react can handle entered URL.
I have deployed a beta version of a create-react-app site to Netlify via GitHub (CD master branch - repo: https://github.com/willstocks-tech/ws-code-react).
When I navigate to the site, everything works perfectly, I can navigate between the Home About & Contact components without any issues.
However, when I refresh the page while viewing one of those components, the page returns completely blank (with a couple of seemingly unrelated errors in the browser console).
Is there something I have missed during my fiddling? Please excuse any newbie errors, this is my first proper go at React!
I have tried creating a netlify.toml file with
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
I have also created an _redirects file (as suggested), as detailed below.
This is my current setup:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './layout/App';
import './assets/stylesheets/index.scss';
//import * as serviceWorker from './serviceWorker';
//serviceWorker.unregister();
ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/navbar';
import Home from 'layout/views/home';
import About from 'layout/views/about';
import Contact from 'layout/views/contact';
import Footer from './components/footer';
class App extends React.Component {
constructor() {
super();
}
render() {
return (
<Router>
<div className="app">
<Navbar />
<div className="view">
<Switch>
<Route exact path="/" component={ Home }/>
<Route path="/about" component={ About }/>
<Route path="/contact" component={ Contact }/>
<Route render={ () => <h1>404 Error</h1> } />
</Switch>
</div> {/* view */}
<Footer />
</div> {/* app */}
</Router>
);
}
}
export default App;
With a /public/_redirects file which currently only has:
/* /index.html 200
I was expecting to be able to send a person a link to say /about or for a person to refresh the page and see the same/updated content, but at the moment they will just see a blank page.
I was a bit of a fool... I forgot to get rid of the .html files in /public!
I'm migrating to ReactRouter v4 and it's just been proving a hassle to me. I have a file in app.js in which i'm trying to setup a simple routing system.
import React, { Component } from 'react';
import { Router, Route, IndexRoute, hashHistory, Redirect } from 'react-router';
import LoginPage from './LoginPage';
import NavigationBar from './NavigationBar';
class App extends Component {
render() {
return (
<Router history={history}>
<Route exact path='/' component={NavigationBar}></Route>
<Route exact path='/login' component={LoginPage}></Route>
</Router>
);
}
}
The code compiles perfectly well, but for some reason on the browser, the navigation bar is shown instead of the login page when the url is localhost:3000/login
The image of the nagivation bar showing instead of the login
I intended the login to be shown at /login and the navigation bar to be shown at /, but instead the navigation bar is shown at both /login and /.
I've been following the examples on the react-router training guide here, and I can't seem to figure out what I'm doing wrong.
Maybe it's just a typo in your post here, but you're extending Compoent instead of Component. I would guess you'd see worse issues than getting the wrong component if that was happening in your code.
I prefer BrowserRouter (I don't have to support legacy browsers), but I got your code working like this:
import React, { Component } from 'react';
import { Route } from 'react-router';
import { HashRouter as Router } from 'react-router-dom';
import LoginPage from './LoginPage';
import NavigationBar from './NavigationBar';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path='/' component={NavigationBar}></Route>
<Route exact path='/login' component={LoginPage}></Route>
</div>
</Router>
);
}
}
You'll have to install react-router-dom for this code to run.
Visiting http://localhost:3000/#/login, I get the Login component. If you change HashRouter to BrowserRouter, you can see your component render at http://localhost:3000/login.