This question already has an answer here:
React Route render blank page
(1 answer)
Closed 5 months ago.
I am a begginer in react and I was creating a webapp with multiple sites, so I downloaded react-router-dom with the npm command, however when I try using it, the webpages shows nothing.
Code:
import '../App.css';
import Header from "./header"
import Custom from "./custom"
import React, {useEffect, useState} from 'react'
import {BrowserRouter,Routes as Switch ,Route,Link} from 'react-router-dom';
let globalID =0
function App() {
return <div>
<div>
<BrowserRouter>
<p>Best to do list</p>
<Switch>
<Route path = "/hello-world">
<h1>I am on route hello world</h1>
</Route>
</Switch>
</BrowserRouter>
<h2>I dont change with the page</h2>
</div>
</div>
}
export default App;
Website:
Routes only accept a <Route> or <React.Fragment> as children
change :
<Route path = "/hello-world">
<h1>I am on route hello world</h1>
</Route>
to:
<Route path = "/hello-world" element={<h1> I am on route hello world</h1>}>
</Route>
Related
This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed 10 months ago.
So I've check multiple posts and websites and I can't get it to work. It just renders a white screen with a the navbar.
This is the code:
App.js:
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
function App() {
return (
<Router>
<Nav/>
<Routes>
<Route path='/about' element={About}/>
</Routes>
</Router>
);
}
export default App;
Index.js:
ReactDOM.render(<React.StrictMode><App/></React.StrictMode>, document.getElementById('root'))
Some component:
<Link to="/about" className="btn btn-colored">Launch</Link>
The 'About' component is working cause I've tested and imported into App.js so that is not the problem.
You need to first import the component you want to render
For example you want to render About component so you would import the About component
Import the component
import About from "./pages/About";
Fix the syntax as in react-jsx we write it in </> brackets.
<Route path='/about' element={} />
When ever i add a <Route> tag to the code everything just disappears from the screen!
the code is fine i guess! there is no warnings showing!!
the output before adding the <Route> tags
and when i add a <Route> tag the output is just not there anymore!!!!
the code before adding the tag:
import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Header />
</BrowserRouter>
</div>
);
}
export default App;
and the code after is really the same but with adding the tags :
import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Header />
<Route></Route>
</BrowserRouter>
</div>
);
}
export default App;
And when i added the tags the content disappeared !
Check you're package.json if the version of react-router-dom is 6 then downgrade it to 5 thats where error comes from.
I know this because now npm install install version 6 as its default version but the tutorials and knowledge about react router on line is still for version 5.
so on your package.json change version from 6 to 5.3.0 and run npm install on your terminal
Since the route tag is empty, you aren't returning anything. You need to pass the path and the component that should be rendered for each path.
In this case considering you have a single path and want to show Hello World!! when the app starts, you should add
<BrowserRouter>
<Route exact path="/" component={App} />
</BrowserRouter>
This will render your App component when you start the app. You can add other components for other routes similarly.
There are few things to do :
a) in react-router-dom v6 Route element should be inside Routes element.
b) instead of component attribute you will have element attribute
c) element attribute should contain jsx like below
<Routes>
<Route exact path="/" element={
<>
<SomeComponent></SomeComponent>
<SomeOtherComponent></SomeOtherComponent>
</>
}>
</Route>
<Route path='/other_address' element={<OtherComponent />}></Route>
</Routes>
I am using React Router to navigate to different pages, each one being a different React Component. If I go to the home page first (e.g. /) then click a Link to take me to a different component (e.g. /new-guide), it renders fine. However, when I push the project to production using AWS or Netlify, accessing any component fails without first going to the home component.
Here's what it looks like in action. If you visit https://www.kelv.me/ then click the 'Gap Year' guide, the gap year component renders correctly. However, if you close the tab and try to visit https://www.kelv.me/gap-year directly, a 'Page not found' error occurs.
Here's my App.js:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import GapYear from './components/GapYear';
function App() {
return (
<Fragment>
<Router>
<Fragment>
<div id='content'>
<Switch>
<Route exact path='/' component={Landing} />
<Route exact path='/gap-year' component={GapYear} />
</Switch>
</div>
</Fragment>
</Router>
</Fragment>
);
}
export default App;
And here's my index.js:
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
I am learning React Routing and I am watching this tutorial:
https://www.youtube.com/watch?v=1iAG6h9ff5s
Its 2016 tutorial so I suppose something changed because 'react-router' not working anymore and I am supposed to use 'react-router-dom'.
I found that I must uninstall 'history' and 'react-router' and use 'react-router-dom' instead, but It not working as expected when I change it.
How to edit this to make it working with 'react-router-dom'?
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Featured}></IndexRoute>
<Route path="archives" component={Archives}></Route>
<Route path="settings" component={Settings}></Route>
</Route>
</Router>,
app);
My edit:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router>
<Route path="/" component={Layout}>
<Route path="/featured" component={Featured}/>
<Route path="/archives" component={Archives}/>
<Route path="/settings" component={Settings}/>
</Route>
</Router>,
app);
Also pushState not working...
Layout.js
import React from "react";
import {Link} from "react-router-dom";
export default class Layout extends React.Component {
navigate() {
this.props.history.pushState(null, "/");
}
render() {
return (
<div>
{this.props.children}
<h1>Welcome</h1>
<button onClick={this.navigate.bind(this)}>Featured</button>
</div>
);
}
}
When I click to Link url change, but content is not loaded... Also when I access url I get "Cannot GET" error
After watching the video, you probably want something like this. At first this would not be so easy to understand but after seeing a few of them you digest it. First you render your Layout with one Route. Then in this top route, you use other Routes to setup your components.
We usually use exact props for a top root like /. If you don't setup your app like that, for example all your routes is in your top Router config, then to use a route something like /featured we must have exact prop. If we don't use it Router always hit / path and we always see the top level component.
But, in your situation, you want other components to be routed in your top level component. So, we drop exact prop here.
Also you can use push to change history.
Update
After think about the navigation button named "Featured", I think you want the Featured component rendered as default one here. When hit the button again you will come back to Featured one. I've changed the code according to that. In this version, we add a / route in the Layout and point it to Featured. So, when we come here it is rendered. But, we use exact prop here since we also want routes like "/featured", "/archives" and "/settings".
export default class Layout extends React.Component {
navigate = () => this.props.history.push("/");
render() {
return (
<div>
<h1>Welcome</h1>
<Link to="/featured">Featured</Link>
<Link to="/archives">Archives</Link>
<Link to="/settings">Settings</Link>
<br />
<button onClick={this.navigate}>Featured</button>
<Route exact path="/" component={Featured} />
<Route path="/featured" component={Featured} />
<Route path="/archives" component={Archives} />
<Route path="/settings" component={Settings} />
<div>
Some other info.
</div>
</div>
);
}
}
const app = document.getElementById('root');
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Layout} />
</Switch>
</Router>,
app);
I have a setup in electron with react router. When I load the app into my browser, and don't go via electron, everything works fine, and the router is good.
When I use it in electron however, my software is not at the root route initially. I can navigate to the root route with the links I created, and that works fine. But it's not there initially, I get a 404. But I don't get any errors as such.
So when i start it, it looks like this:
But the Links all work, so I can click for example on Home at am redirected to the Home route:
My switch looks like this:
<Switch>
<Route exact path='/' component={Home}/>
<Route component={NotFound}/>
</Switch>
And that component sits in another component:
import React from 'react';
import Header from './Header.jsx'
import Main from './Main.jsx'
export default class App extends React.Component {
render() {
return (
<div style={{textAlign: 'center'}}>
<Header />
<Main />
</div>);
}
}
which sits in this component:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'));
and here is also the Main.js which holds the Routes:
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route component={NotFound}/>
</Switch>
</main>
)
So as far as I am concerned, everything should be working fine, and, as I said, it does in the browser. But electron does not seem to start my react router at /. Why could this be?