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.
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'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;
I am doing this Router tutorial.
My App.jsx file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
my Main.js file:
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
This error is written to the console: index.js:
Uncaught ReferenceError: ReactDOM is not defined
I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.
You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render.
Also need to import React in all files that use JSX.
Finally, also put react-router imports into Main, too.
The way imports work is, you import things you need, in places they're needed. It's not enough to import them once in one file and use in others.
Change Main.js to look like
import ReactDOM from 'react-dom'
import React from 'react'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
This error also happens if there is a Typo
"import ReactDOM from "react-dom";"
and then call Reactdom.render( <App />, document.getElementById('root')) instead of ReactDOM.render....
1) install "npm install --save react-router-dom" with this command.
2) Know modify your App.jsx like this
import React from 'react';
import { Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<header>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
</nav>
</header>
);
}
}
class Content extends React.Component {
render() {
return (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</main>
);
}
}
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
);
}
}
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
);
}
}
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
);
}
}
export default App;
4) modify your main.js like this
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import {HashRouter} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), document.getElementById('app'))
I had the same issue with my ReactDOM.render not to work until I imported the following:
import ReactDOM from 'react-dom'
into the page I created, which was the shopping cart page.
you should import ReactDOM and other stuff in Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import {App, Home, About,Contact} from './App'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
if App.js file contains all components you should change export statements:
from export default Component
to export Component.
And use named import in Main.js import {App, Home, About,Contact} from './App'
import React from 'react';
import { Link, browserHistory} from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export Contact;
for browserHistory, you must configure your server appropriately to serve at all routed paths. The simplier way is using hashHistory.
//import hashHistory
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
...
//pass in Router
<Router history = {hashHistory}> ....
I just have a simple solution for it!
in my case the problem was with ReactDom namespace. just change it to something else and it work!
import XReactDom from 'react-dom'
In this tutor this command "npm install react-router" does not save it in package.json file so modify and run command to "npm install --save react-router".
RouterDOM is used in main file, in your case its Main.js (where rendering takes place). Your Main.js file is the starting point and as its render reactDOM but cannot find the import for it.
Just to import it in same file where its used.
I had a similar issue and was able to fix it by importing ReactDOM like this:
import * as ReactDOM from 'react-dom';
And then used it like this:
<Fragment>
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById("backdrop-root")
)}
</Fragment>
I am trying to use the activeClassName however somehow its not working. My Links are in separate Header component. Following is code details.
client.js
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";
import Layout from "./components/Layout";
import Archive from "./pages/Archive";
import Feature from "./pages/Feature";
import Profile from "./pages/Profile";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Feature}></IndexRoute>
<Route path="archive(/:articleid)" component={Archive}></Route>
<Route path="profile" component={Profile}></Route>
<Route path="settings" component={Settings}></Route>
<Route path="feature" component={Feature}></Route>
</Route>
</Router>,
app
);
Layout.js
import React from "react";
import Header from "./Header";
import Footer from "./Footer";
export default class Layout extends React.Component {
navigate () {
console.log(this.props);
this.props.history.replaceState(null,"/settings");
}
render () {
return (
<div>
<Header navigate={this.navigate.bind(this)} title="Welcome to React based Application :-)"></Header>
{this.props.children}
</div>
)
}
}
Header.js
import React from "react";
import Title from "./Header/Title";
import {Link} from "react-router";
export default class Header extends React.Component {
render () {
return (
<div>
<Title title={this.props.title}></Title>
<span><Link to="archive" className="btn btn-success" activeClassName="btn-primary"> archive</Link> </span>
<span><Link to="profile" className="btn btn-success">profile</Link> </span>
<span><Link to="settings" className="btn btn-success">settings</Link> </span>
<span><Link to="feature" className="btn btn-success">feature</Link> </span>
</div>
)
}
}
Please help.