React Router not render

React Router not render - javascript

I tried using react router but it doesn't work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:
App.js
'''
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<Router>
<div>
<HomePage />
</div>
</Router>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
'''
HomePage.js
'''
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
<p>This is Home Page</p>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
'''

The error is that "You cannot render a Router inside another Router " occurs when we have 2 Router components in the same React application.
So if u see u are calling in App.js and when u call Homepage from app.js it renders again. Thats why everything becomes blank.
and avoid using p tag inside render function in homepage.js
Try doing this:
**App.js**
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
**Homepage.js**
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}

Related

Routing returns white page in React.js

I'm trying to set up routing but for some reason, it returns a blank page and renders nothing.
I'm using router version 6.3.0
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Route path="/landing">
<Landing />
</Route>
<Footer />
</Fragment>
);
}
}
export default App;
// --------------------------------------------- //
// Landing.js
import Body from './Body'
function Landing(props) {
return (
<Body>
<div className="Landing">
Landing Context
</div>
</Body>
)
}
export default Landing;
So when I visit http://localhost:3000/landing nothing is rendered, and when I try http://localhost:3000 nothing is rendered either.
If I remove the <Route></Route> part in App.js, it renders, but on any URL. What do I miss?

As the OP is using react-router-dom v6
Instead of children, it is expecting element props to render the component.
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

In app.js wrap your route in router like this
import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Router>
<Route path="/landing">
<Landing />
</Route>
</Router>
<Footer />
</Fragment>
);
}
}
export default App;

react-router v6 has some breaking changes, it replaced Switch with Routes component:
/ index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Routes>
<Route path="/landing" element={<Landing />}/>
</Routes>
<Footer />
</Fragment>
);
}
}
export default App;
https://reactrouter.com/docs/en/v6/getting-started/overview

If your are using react-router version < 6 then you have to add Switch element imported from react-router-dom above your Route Element -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Switch>
<Route path="/landing">
<div>On LAnding Page</div>
</Route>
</Switch>
</Fragment>
);
}
}
export default App;
And if you are using react-router > 6 then you have to replace Switch with Routes and place your component you want to render inside element property of Route . The code should be similar to following -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Routes>
<Route path="/landing"
element={<div>On Landing Page</div>}>
</Route>
</Routes>
</Fragment>
);
}
}
export default App;

React - React Router - A <Router> may have only one child element

I'm a newbie at React, please correct me if I'm wrong...I've used the Switch tag to enclose multiple Routes in my MainComponent.js file. However, I still got an error that says "A may have only one child element". I'm trying to navigate from one page to another.
For example, when I click on Menu in the landing page, I would like to get routed to Menu.
Please advise what went wrong. Thanks in advance.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
class App extends Component {
// pass dishes to children (MenuComponent.js) as props
/*
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}*/
render() {
return (
<BrowserRouter> {/* Make use of React Router */}
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
// Container Component
import React, { Component } from 'react';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes'; // .. means to go up one level to src
import { Switch, Route, Redirect } from 'react-router-dom';
class Main extends Component {
// pass dishes to children (MenuComponent.js) as props
constructor(props) {
super(props);
this.state = {
dishes: DISHES,
// selectedDish: null
};
}
/*
onDishSelect(dishId) {
this.setState({selectedDish: dishId});
}
*/
render() {
const HomePage = () => {
return (
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path="/home" component={HomePage} />
<Route exact path="/menu" component={() => <Menu dishes={this.state.dishes} />} /> {/* path should exactly match /menu and nothing else after /menu */}
{/* component={() => <Menu dishes={this.state.dishes} />} ----> this will allow to pass props to Menu component */}
<Redirect to="/home" /> {/* if the path doesn't match any above, redirect to /home */}
</Switch>
<Footer />
</div>
);
}
}
export default Main;

Just remove the <div className="App"> from your App.js file.
And use the below code as I have written below. It will 100% work for you.
import { BrowserRouter } from 'react-router-dom';
class App extends Component
{
render() {
return (
<BrowserRouter>
<Main/>
</BrowserRouter>
);
}
}
export default App;

React route from another file is rendered on every path

I'm trying to separate routes into their own file, but they seem to be always rendered, even if I've added exact to the path.
Home route - home.js:
import React from 'react';
import { BrowserRouter as Route } from 'react-router-dom';
import { HomePageView } from 'components'
const HomeRoute = () => (
<Route exact path='/home'>
<HomePageContainer />
</Route>
)
export default HomeRoute;
HomePageView.js:
import React from 'react';
class HomePageView extends React.Component {
render() {
return (
<div>Some text here</div>
)
}
}
export default HomePageView;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomeRoute from 'routes/home'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<HomeRoute />
</Router>,
document.getElementById('root')
);
The problem is that it renders the HomePageView component on any path and I don't understand why this happens because it works as expected if I replace <HomeRoute /> from index.js with:
<Route exact path='/home'>
<HomePageContainer />
</Route>

I haven't tested this myself, but isn't the problem that you are importing BrowserRouter as Route in your home.js?
The file would looks like this when rendered:
<BrowserRouter>
<BrowserRouter>
<HomePageContainer/>
<BrowserRouter/>
<BrowserRouter/>
You need to import route from react-router-rom like this import { Route } from "react-router-dom";
"as" in import is an alias, not what is imported.
Fixed home.js file:
import React from 'react';
import { Route } from "react-router-dom";
import { HomePageView } from 'components'
const HomeRoute = () => (
<Route exact path='/home'>
<HomePageContainer />
</Route>
)
export default HomeRoute;

Hide current component before rendering component linked to Navlink - React Router

I am building a single page web app based on react routing where I want to Hide current component before rendering the next component that is supposed to render after clicking on Navlink just like <a href="someLink"> in html. However, my current component doesn't disappear and the next component renders on the same page next to the current component.
my code for app.js (Main file where parent class renders)
import React from 'react';
import {Parent} from './Parent';
import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom';
function App() {
return (
<div className="App">
<header className="App-header">
<Router>
<NavLink to="/Edit">Edit</NavLink>
<Route path="/Edit" component={Edit}/>
</Router>
</header>
</div>
);
}
export default App;
Here is my code for parent.js -
import React from 'react';
import {Child} from './Child';
import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom';
class Parent extends React.Component{
constructor(props) {
super(props);
}
render(){
return(
<div>
<p>Parent Render</p>
<Router>
<NavLink to="/Parent/Child">Child</NavLink>
<Route path="/Parent/Child" component={Child}/>
</Router>
)
}
}
export {Parent}
Child.js
import React from 'react';
class Child extends React.Component{
constructor(props) {
super(props);
}
render(){
return(
<div>
Child Render
</div>
)}
}
export{Child}
There is no problem in app.js. The problem is that when child navlink is clicked, parent does not disappear

I think the best way to approach it would be to wrap your App.js component with BrowserRouter inside your index.js file like this.
//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById("root")
);
And subsequently, you can update your App.js component with all the routes you desire to have by wrapping all the components within the Route component like this.
//App.js
import React from "react";
import { Parent } from "./Parent";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import Home './Home'
import Edit from './Edit'
import Parent from './Parent'
function App() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/Edit" component={Edit} />
<Route path="/parent" component={Parent} />
</Switch>
</div>
);
}
export default App;
Now you don't have to wrap your child components with <Router />, you can create as many <Routes /> in App.js and use <Link /> to navigate to that links.

React nested routing

I'm learning React and am thinking how the hell do I create dynamic route
like partial pages in Angular.
Here is my top level App component
import React from 'react';
import Header from '../common/Header';
export default class App extends React.Component {
render() {
return (
<div>
<Header/>
//Render partial pages here e.g /dashboard, /users
</div>
);
}
}
My Route looks like this:
import React from 'react';
import {render} from 'react-dom';
import {Router, IndexRoute, Route, browserHistory} from 'react-router';
import App from './app/components/containers/App';
import Dashboard from './app/components/containers/Dashboard';
import Ecosystem from './app/components/ecosystem/Ecosystem';
import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';
render(
<Router history={browserHistory}>
<Route component={App}>
<IndexRoute component={Dashboard}/>
<Route path="/ecosystem/:name" component={Ecosystem}/>
<Route path="*" component={Dashboard}/>
</Route>
</Router>,
document.getElementById('root')
);
Any idea please ?

Does this work?
import React from 'react';
import Header from '../common/Header';
class App extends React.Component {
render() {
return (
<div>
<Header/>
{this.props.children}
</div>
);
}
}
App.propTypes = {
children: React.PropTypes.node,
};
export default App;

Develop Reference

JavaScript is the programming language of the Web.

React Router not render - javascript

Related

Routing returns white page in React.js

React - React Router - A <Router> may have only one child element

React route from another file is rendered on every path

Hide current component before rendering component linked to Navlink - React Router

React nested routing

Categories

Resources