I'm following an online React tutorial. In the tutorial React Router 3 used while I got React Router 4 when I downloaded React Router (and react-router-dom). The code in the tutorial looks like this.
import React from "react";
import {render} from "react-dom";
import {Router, Route, browserHistory} from 'react-router'
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<Router>
<Route path={"user"} component={User}/>
<Route path={"home"} component={Home}/>
</Router>
);
}
}
render(<App />, window.document.getElementById('app'));
I'm trying to rewrite the code to work with React Router 4 like this:
import React from "react";
import {render} from "react-dom";
import {Switch, BrowserRouter, Route} from 'react-router-dom'
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path={"user"} component={User}/>
<Route path={"home"} component={Home}/>
</Switch>
</BrowserRouter>
);
}
}
render(<App />, window.document.getElementById('app'));
The code for User.js looks like this:
import React from "react";
export class User extends React.Component {
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: </p>
</div>
);
}
}
When I try localhost:8080/user it returns nothing.
I only get
<div id="app">
<!-- react-empty: 1 -->
</div>
What is it I need to change in my code?
Try with
<Route path="/user" component={User}/>
I have answered this Issue here
Wrap your <App> in <BrowserRouter> in index.js
Related
I'm new to React. I'm trying to learn react-router. What I'm trying to do is have two components link to each other like so:
Here is the App.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
The About.js
import React from 'react';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' render={() =>
<div>
<Link to={'/home'}>Hello</Link>
</div>}/>
<Route path='/home' component={Home}/>
</Switch>
</Router>
);
}
}
export default About;
and the Home.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class Home extends React.Component {
ender () {
return (
<Router>
<Switch>
<Route path='/home' render={() =>
<div>
<Link to={'/'}>Hi</Link>
</div>}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default Home;
When I start the app, the About component gets rendered. However, when I click the link, the URL changes but the Home components does not get rendered. What am I doing wrong?
It's best practice to have your routing logic at one place, in this case in App.js.
import React from 'react';
import About from './About';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/home' component={Home}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
and then in Home.js
import React from 'react';
import {Link} from 'react-router-dom';
class Home extends React.Component {
render () {
return (
<div>
<h1>This is home component</h1>
<Link to={'/'}>Go to About Component</Link>
</div>
);
}
}
export default Home;
and in About.js
import React from 'react';
import {Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<div>
<h1>This is About component</h1>
<Link to={'/home'}>Go to Home Component</Link>
</div>
);
}
}
export default About;
I have the following index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';
ReactDOM.render(
<BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));
the following in main.js:
import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';
class Main extends Component {
render() {
return (
<div id="main-layout">
<div id="main-header">
<div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
<div><h2>Lil Test By Me</h2></div>
</div>
<div id="main-content">
<NavMenu />
<Content />
</div>
<div id="main-footer">
<div>Copyright © 2020. Powered By me. All Rights Reserved.</div>
</div>
</div>
);
}
}
export default Main;
And The following in content.js
import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
It it my attempt to create an SPA with the Content component as my target for all my subsequent pages; however, I am clearly doing something wrong as I am getting all kinds of errors all over the place. Can anyone immediately see what I am doing incorrectly here?
Route and Switch needs to be imported from react-router-dom instead of react-dom
import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
Use react-router-dom instead of react-router and then
change your content.js code to this.
import React, { Component } from 'react';
import {Route, Switch, BrowserRouter as Router} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Router>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route path="/invoicing" component={Invoicing} />
</Switch>
</Router>
)
}
};
export default Content
notice that I have added Router above the switch. and changed react-router to react-router-dom and also transformed the routes to lowercase
I want to perform history.push
but it is not working.
i have used withRouter , History etc.
can anyone help me to resolve it
register=(e)=>{
e.preventDefault()
this.props.history.push('/dashboard')
}
import React from 'react';
import './App.css';
import Login from './component/login/login'
import Header from './component/header/header'
import { createBrowserHistory } from 'history';
import { Router, Route, Switch } from 'react-router-dom'
const his=createBrowserHistory()
class App extends React.Component {
render(){
return (
<Router history={his} >
<div className="App">
<Header />
<Switch>
<Route path="/register" component={Login} exact/>
</Switch>
</div>
</Router>
);
}
}
export default App;
I know this question asked many times, but I can't get the right answer, just creating a small project to learn reactjs
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import routes from './config/routes';
import jquery from 'jquery';
import metismenu from 'metismenu';
import bootstrap from 'bootstrap';
import '../../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../../../../node_modules/font-awesome/css/font-awesome.css'
import '../../../../node_modules/animate.css/animate.min.css'
import '../../css/style.css'
ReactDOM.render(
<Router>{routes}</Router>,
document.getElementById('indo')
);
config/routes.js
import React from 'react'
import Main from '../layouts/Main';
import Blank from '../layouts/Blank';
import MainView from '../views/Main';
import MinorView from '../views/Minor';
// import { Router, IndexRedirect} from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';
export default (
<Router>
<Route path="/">
<Main>
<Route path="/main" />
<Route path="main" component={MainView}> </Route>
<Route path="minor" component={MinorView}> </Route>
</Main>
</Route>
</Router>
);
here is my Main.js, the source of error
import React from 'react';
import Progress from '../common/Progress';
import Navigation from '../common/Navigation';
import Footer from '../common/Footer';
import TopHeader from '../common/TopHeader';
import { correctHeight, detectBody } from './Helpers';
class Main extends React.Component {
render() {
let wrapperClass = "gray-bg " + this.props.location.pathname;
return (
<div id="wrapper">
<Progress />
<Navigation location={this.props.location}/>
<div id="page-wrapper" className={wrapperClass}>
<TopHeader />
{this.props.children}
<Footer />
</div>
</div>
)
}
Dev tools tells error in the line, "let wrapperClass = "gray-bg " + this.props.location.pathname;"
Any ideas?
Try using
import {MainView} instead of import MainView.
Also add an export at the beginning of MainView class declaration.
like
export class MainView extends React.Component ...
the changes should lead to the following result:
route.js:
import React from 'react'
import Main from '../layouts/Main';
import Blank from '../layouts/Blank';
import {MainView} from '../views/Main';
import {MinorView} from '../views/Minor';
// import { Router, IndexRedirect} from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';
export default (
<Router>
<Route path="/">
<Main>
<Route path="/main" />
<Route path="main" component={MainView}> </Route>
<Route path="minor" component={MinorView}> </Route>
</Main>
</Route>
);
Main.js:
import React from 'react';
import Progress from '../common/Progress';
import Navigation from '../common/Navigation';
import Footer from '../common/Footer';
import TopHeader from '../common/TopHeader';
import { correctHeight, detectBody } from './Helpers';
export class MainView extends React.Component {
render() {
let wrapperClass = "gray-bg " + this.props.location.pathname;
return (
<div id="wrapper">
<Progress />
<Navigation location={this.props.location}/>
<div id="page-wrapper" className={wrapperClass}>
<TopHeader />
{this.props.children}
<Footer />
</div>
</div>
)
}
Haven't tried it out but it sounds to me that the issue might be an import issue.
Let me know if it works.
I just found solution
in config/route.js, I changed to
<Router>
<div>
<Route path="/" component={Main}/>
<Route path="main" component={MainView}/>
<Route path="minor" component={MinorView}/>
</div>
</Router>
Hope it helps others
I just upgraded to React Router v4 with a react 15.4.2 app based on a boilerplate from Fountain JS and after reading this article, I wrote this:
// Index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import {Main} from './app/pages/main';
import {App} from './app/pages/app';
import './index.scss';
const MainRouter = () => (
<div>
<main>
<Switch>
<Route path="/home" component={Main}/>
<Route path="/app" component={App}/>
</Switch>
</main>
</div>
);
ReactDOM.render(
<BrowserRouter>
<MainRouter/>
</BrowserRouter>,
document.getElementById('root')
);
// App.jsx
import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';
import PropTypes from 'prop-types';
import {Dashboard} from './app/dashboard';
import {Money} from './app/money';
import {Header} from '../tpl/header';
import {Footer} from '../tpl/footer';
export class App extends Component {
render() {
return (
<div>
<Header/>
<main>
<Switch>
<Route path="/app/dashboard" exact component={Dashboard}/>
<Route path="/app/money" exact component={Money}/>
</Switch>
</main>
<Footer/>
</div>
);
}
}
// dashboard.jsx
import React, {Component} from 'react';
export class Dashboard extends Component {
render() {
return (
<div>
<h1>This is the Dashboard</h1>
</div>
);
}
}
Navigating to http://localhost:3000/app/ seems to work fine but navigating to http://localhost:3000/app/dashboard gives 404. What could I be possibly getting wrong?
PS Even on the routes that work, adding a trailing slash will not work.
You need to correct dashboard route at the end of App's render. No need for another Switch over there. So in your App.jsx file's render method :
render() {
return (
<div>
...
<Route path="/app/dashboard" component={Dashboard}/>
</div>
);
}