This question already has answers here:
React Router Dom routes are returning blank pages
(2 answers)
Closed 8 months ago.
I'm following along with this React Tutorial on YouTube but I can't get my routes to render on own dev server.
This is what my home screen is rendering. My home screen should show a pink background underneath the navigation bar.
I suspect the error is happening in this section of my App.js code, since everything else outside of works fine:
<Routes>
<Route exact path="/" component={HomeScreen}/>
</Routes>
I'm using react-router-dom v6.3.0
My App.js code:
import './App.css';
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
// Screens
import HomeScreen from './screens/HomeScreen';
// Components
import Navbar from './components/Navbar';
import SideDrawer from './components/SideDrawer';
import Backdrop from './components/Backdrop';
function App() {
const [sideToggle, setSideToggle] = useState(false);
return (
<Router>
<Navbar click={() => setSideToggle(true)} />
<SideDrawer show={sideToggle} click={() => setSideToggle(false)} />
<Backdrop show={sideToggle} click={() => setSideToggle(false)} />
<main>
<div className="app">This is a test</div>
<Routes>
<Route exact path="/" component={HomeScreen}/>
</Routes>
</main>
</Router>
);
}
export default App;
My index.js code:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
My HomeScreen code:
import "./HomeScreen.css";
const HomeScreen = () => {
return (
<div className="homescreen">
Home Screen
</div>
)
}
export default HomeScreen
Hope someone's able to give some advice to a React newbie?
Please let me know if I need to provide more info.
Wen, If you are using react-router-dom v6.3.0. then you have to use
<Routes>
<Route exact path="/" element={<HomeScreen/>}/>
</Routes>
I think there is your error:
import React from "react"; import { BrowserRouter} from "react-router-dom"; import ReactDOM from "react-dom";import "./index.css";import App from "./App";import reportWebVitals from "./reportWebVitals";ReactDOM.render(<React.StrictMode>BrowserRouter><App>BrowserRouter>React.StrictMode>,document.getElementById("root")reportWebVitals();
you need to cover app component in browserouter if it doesn't work than update your react-router-dom ande try thise simple docs
It should be element, not component, that property that renders a component for a Route, and the component should be called:
<Route exact path="/" component={<HomeScreen/>}/>
What you have there is for React Router Dom v5.
Related
Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);
In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
When I try to render the "Home" component it just doesn't show anything... The path is correct, and the Router imports should be fine too. What am I missing? It worked on another project of mine and even if I copy and paste that code it doesn't seem to work.
App.js:
import React from "react";
import Home from "./components/Home"
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
function App() {
return (
<Router>
<Routes>
<Route exact path="/" element={<Home/>}/>
</Routes>
</Router>
);
}
export default App;
Home.js:
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
I expected the "Home" component to be rendered as soon as I load the page, but it wasn't (Blank page). I checked if I imported it incorrectly, but as soon as I delete the "Router" and "Routes" tags as well as the Route itself and just try to render the "Home" component on its own, it works.
It's probably something really small that I'm missing but I can't seem to figure it out right now.
Using Route requires Switch component which means you'll do the following:
import React from "react";
import Home from "./components/Home"
import {BrowserRouter as Router, Route, Routes, Switch} from "react-router-dom"
function App() {
return (
<Switch>
<Route exact path="/" >
<Home/>
</Route>
</Switch>
);
}
export default App;
I am trying to figure out React and am not sure what is wrong here, as the browser shows a blank.
Here is the Code.
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import Home from './Home';
function App() {
return (
<>
<Router>
<Routes>
<Route exact path="/" element={<Home />}/>
</Routes>
</Router>
</>
);
}
export default App;
Update 1 -
The code as viewed on index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
This is a react#18 change in how React apps are rendered. createRoot takes a DOMNode reference, not JSX. Once the root is created, then you can call a render method on it.
Example:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
See react-dom-client for more in-depth detail.
I don't find any error in this page. Check whether you have imported the home component properly here. If it is imported properly, Check the home component for errors. You can also check whether you are getting any errors or warnings in the console.
My backend is in django. I can get post data from there and also post list.
In reactjs, I am just displaying post details and lists (and some more details related to posts...)
In reactjs my index.js file is as below
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root"),
);
serviceWorker.unregister();
My app.js file is as below
import React from "react";
import { Route, Switch } from "react-router-dom";
import HomePage from "./pages/HomePage";
import BlogPage from "./pages/BlogPage";
import "./css/styles.css";
import CategoryPostsPage from "./pages/CategoryPostsPage";
import SearchPage from "./pages/SearchPage";
import ContactPage from "./pages/ContactPage";
function App() {
return (
<main>
<Switch>
<Route path="/post/:slug/" component={BlogPage} />
<Route
path="/category/:slug/"
component={CategoryPostsPage}
/>
<Route
path="/query/:query/"
component={SearchPage}
/>
<Route path="/contact/" component={ContactPage} />
<Route path="/" component={HomePage} />
</Switch>
</main>
);
}
export default App;
I add new posts from backend (django admin panel).
And through API, react app gets data from backend.
I want to have all urls like
/post/some-slug
/post/some-slug-2
...
/
/contact/
...
This is for SEO purpose, When I search, it displays only homepage url and contact page url, not a single url for any post...
Please suggest, what should I do,
I have tried sitemap packages from npm, but doesn't seem working...
React noob here, I'm trying to add a link in my material-ui toolbar using React-router v4 to the home page but I keep getting the error:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in.
Check the render method of LandingToolBar.
I'm trying to copy the basic example here https://reacttraining.com/react-router/web/example/basic but instead putting the top list in another component called LandingToolBar but I can't see to get it to work. Here is my index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import injectTapEventPlugin from 'react-tap-event-plugin'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
injectTapEventPlugin();
ReactDOM.render(
<MuiThemeProvider>
<App />
</MuiThemeProvider>,
document.getElementById('app')
);
My app.js:
import React from 'react'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import LoginPage from "./containers/LoginPage";
import SignUpPage from "./containers/SignUpPage";
import HomePage from "./components/landing/HomePage";
import LandingToolBar from "./components/landing/LandingToolBar";
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<LandingToolBar/>
<Switch>
<Route path="/" exact component={HomePage}/>
<Route path="/login" component={LoginPage}/>
<Route path="/signup" component={SignUpPage}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
export default App;
And the toolbar component LandingToolBar that I'm trying to render always:
import React from 'react';
import Link from 'react-router-dom';
import {ToolbarGroup, ToolbarTitle, RaisedButton, Toolbar} from 'material-ui'
const LandingToolBar = () => (
<Toolbar>
<ToolbarGroup>
<ToolbarTitle text="ETFly"/>
<Link to="/">feafeaf</Link>
</ToolbarGroup>
</Toolbar>
);
export default LandingToolBar;
Struggling pretty hard with the routing part as there doesn't seem to be much explanation in the docs or for v4 stuff...
Thanks for the help!
You need to import the Link like this, its a named import not default import:
import {Link} from 'react-router-dom';
Check this answer for named vs default import/export.