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.
Related
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>
);
}
}
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;
I am learning React, so this question may make no sense but I want to learn it.
I have index.html page and I want to jump to Components.html page.
RouteToComponent.jsx
import React from 'react';
class RouteToComponents extends React.Component {
render() {
return (
<div>
Components
</div>
);
}
}
export default RouteToComponents;
RouteToComponent.jsx is called inside index.jsx
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import RouteToComponents from './BasicJSX/RouteToComponents.jsx';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
<RouteToComponents />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
components.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
Entered Components HTML!!!
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
But when I click on a tag URL changes but the page remains same.
Wrap your App.js with Router and define Routes. <Route /> allows us to define all paths of our Application.
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import RouteToComponents from './RouteToComponents.jsx';
import AnyComponent from './AnyComponent';
import App from './App.jsx';
return (
<Router>
<RouteToComponents />
<Switch>
<Route exact path="/" component={App} />
<Route path="/Components/Components.html" component={AnyComponent} />
</Switch>
</Router>
);
Now in your Component where you want to use Link.
In React <Link /> is used instead of anchor.
import { Link } from "react-router-dom";
return (
<div>
<Link to="Components/Components.html">Components</Link>
<Link to="/">Home</Link>
</div>
);
to in Link attribute is similar to href in anchor.
Remember:
npm i react-router-dom
to attribute of Link must be similar to the path defined in App.js Route.
Because when you click on Link it matches Routes in App.js
I am trying to route to a class component but it gives me an error. When I change the component to a functional component, the routing works. How do I route to class components?
I am new to using react-router. I first had a functional component to route to. But once I realized the component needs to be a class, I changed it to a class and now the routing shows
"Cannot GET /explore/words'.
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector("#root")
);
App.js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ExplorePage from "./pages/ExplorePage";
function App() {
return (
<Router>
<div>
<header>
<nav>Course Finder</nav>
</header>
<Route path="/" component={HomePage} />
<Route path="/explore/:campus" component={ExplorePage} />
</div>
</Router>
);
}
export default App;
Explore.js
import React, { Component } from "react";
class ExplorePage extends Component {
render() {
return (
<div>
<h1>Explore</h1>
</div>
);
}
}
export default ExplorePage;
Expected result was to see the 'Explore' heading.
I get 'Cannot GET /explore/words' instead.
This is working fine, all you have to do is add /explore/one to url to see the route working.
https://codesandbox.io/embed/nervous-wood-cw8cd
When I am clicking on the link "cake" I am getting the error the path is not matched or server is not able to find.
Here is my code for 3 files - Router, Navigation and detail components
Routers.js- component handling the routing
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import {CreateHashHistory} from 'history';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { browserHistory } from 'react-router';
import Base from './Base.jsx';
import ListDetail from './ListDetail.jsx';
let Routes =
<Router history={browserHistory}>
<Route path="/" component={Base} >
<Route path="/cake" component= {ListDetail}></Route>
</Route>
</Router>
export default Routes;
Navigation components - handling the navigaton links
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
class ContentList extends React.Component {
render(){
return(
<div id="innercontent">
<h2>What you love?</h2>
<ul >
<Link to={'/cake'}>Cakes</Link>
<Link to={'/icecream'}>icecream</Link>
<Link to={'/browin'}>browin</Link>
</ul>
</div>
)
}
}
export default ContentList;
Detail Component - Detail page to display
import React from 'react';
import ReactDOM from 'react-dom';
class ListDetail extends React.Component {
render(){
return(
<div>
<h1>hi Details</h1>
</div>
)
}
}
export default ListDetail;
Base.JSX
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header.jsx';
import Footer from './footer.jsx';
import ContentList from './contentList.jsx';
import FormElement from './form.jsx';
import ListDetail from './ListDetail.jsx';
class Base extends React.Component {
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
</section>
<Footer />
<ListDetail />
</div>
)
}
}
export default Base;
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router.jsx';
ReactDOM.render(Routes, document.getElementById('app'));
Thanks for the help!!
The render function of your base.jsx file should be something like this :
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
{this.props.children}
</section>
<Footer />
</div>
)
}
Route should be
<Route path="cake" component= {ListDetail} />
And the link :
<Link to="cake">Cakes</Link>
You need to render the routes somewhere.
...A single component to be rendered when the route matches the URL. It can be rendered by the parent route component with this.props.children. Read this.
const routes = (
<Route path="/" component={App}>
<Route path="groups" component={Groups} />
<Route path="users" component={Users} />
</Route>
)
class App extends React.Component {
render () {
return (
<div>
{/* this will be either <Users> or <Groups> */}
{this.props.children}
</div>
)
}
}
You don't need the / in /cake, it's already under /. Do it like this:
<Route path="cake" component={ListDetail} />
Try the following, not sure if it would help.
1. Use
var ContentList = React.createClass({})
instead of
class ContentList extends React.Component.
2. remove the / before 'cake' in your route path.
try using
var Routes = React.createClass({
render: function() {
return (
<div>
<Router history={browserHistory}>
and your updated code instead of let
hope it helps
Does it work with hashHistory ?
To use browserHistory, you need to set up server side rendering.
Here is the tutorial (especially lesson 11 and 13) which helped me understand and set up react-router using browserHistory and server side rendering:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/
Hope it helps.