I have Login.js and this is the code:
import React, {Component} from 'react';
import {FormGroup, FormControl} from 'react-bootstrap';
class Login extends Component {
render() {
return (
<div className="middle-box text-center loginscreen animated fadeInDown">
<div>
<h1 className="logo-name">Pz</h1>
</div>
<form>
<FormGroup bsSize="large">
<FormControl type="text" placeholder="Large text" />
</FormGroup>
</form>
</div>
)
}
}
export default Login
This is my routes.js
import React from 'react'
import Main from '../components/layouts/Main';
import Blank from '../components/layouts/Blank';
import LoginView from '../views/Login';
import MainView from '../views/Main';
import MinorView from '../views/Minor';
import { Route, Router, IndexRedirect, browserHistory} from 'react-router';
export default (
<Router history={browserHistory}>
<Route path="/" component={Main}>
<IndexRedirect to="/main" />
<Route path="main" component={MainView}> </Route>
<Route path="minor" component={MinorView}> </Route>
<Route path="login" component={LoginView}> </Route>
</Route>
</Router>
);
The error is :
warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Login.
invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Login.
Whats wrong with the code? please help
Yeaaaahh, i know what the problem, need the latest version of react-bootstrap.
in my case, i've used v0.30.5
Related
While clicking on the links updates the slug, I have to manually refresh the page in order to get the page content to update.
app.js:
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavigationContainer from './titlebar';
import AllLinks from './all-links';
import Home from './home';
export default class App extends Component {
render() {
return (
<div className='app'>
<NavigationContainer />
<Router>
<Switch>
<Route path="/all-links" component={AllLinks} />
<Route exact path="/" component={Home} />
</Switch>
</Router>
</div>
);
}
}
titlebar.js:
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
export default class NavigationContainer extends Component {
render() {
return (
<div className="navigation-container">
<div className="text-wrapper">
<div className="nav-left">
<NavLink exact to="/">
Redis Link Shortener
</NavLink>
</div>
<div className="nav-right">
<NavLink to="/all-links" >
All Links
</NavLink>
</div>
</div>
</div>
)
}
}
I've tried going through documentation, going through similar questions, and going through code I've written in the past that does work in this regard. As far as I can tell, what I'm using is identical to code I've written in the past that has worked. I'm completely stuck for why it isn't automatically rendering.
I have searched through different tutorials and multiple stackOverflow questions. And none of which, helped me solve a very basic problem:
Implement nested routes with react-router-dom
Here's my code so far:
App.js
<Route exact path="/home" name="Home" component={DefaultLayout} />
DefaultLayout.js
<Route path="/home/users" component={Users} />
When I go to /home/users, I get a blank screen because react-router-dom is looking-up the definition of that route inside App.js instead of searching it inside DefaultLayout.js..
So I have two questions:
QUESION 1: What am I doing wrong exactly?
QUESTION 2: How does react-router-dom know that it should look for the nested route inside DefaultLayout.js instead of inside App.js?
It has been two days and I still cannot solve this simple problem.
Any help is very much appreciated.
EDIT 1: I have started a new project just for the sake of implementing a very simple nested routing:
App.js
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import ParentComponent from "./nestedComponents/ParentComponent";
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/home" name="Home" component={ParentComponent} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
ParentComponent.js
import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";
export default function ParentComponent() {
return (
<div>
PARENT COMPONENT
<Switch>
<Route path="home/nestedComponentOne" component={nestedComponentOne} />
<Route path="home/nestedComponentTwo" component={nestedComponentTwo} />
</Switch>
</div>
);
}
nestedComponentOne.js
import React from "react";
export default function nestedComponentOne() {
return <div>NESTED COMPONENT 1</div>;
}
nestedComponentTwo.js
import React from "react";
export default function nestedComponentTwo() {
return <div>NESTED COMPONENT 2</div>;
}
But, I still get a blank screen whenever I try to access a nested component...
You have this problem:
React-router urls don't work when refreshing or writing manually
The simplest fix is to replace the BrowserRouter with a HashRouter
I have created a reactjs app having three pages (components), App, Login and Register, where I need to navigate from page to page by entering the url in the browser but the navigation is not working for me. Entering any url just shows me the 'App' page.
following is the code that I have written in main.js file of the app and the url that I am using to navigate looks something like this http://localhost:8080/#/login or http://localhost:8080/#/reg
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink, Redirect, Switch, hashHistory} from 'react-router-dom'
import App from './../jsx/App.jsx';
import Login from './../jsx/Login.jsx';
import Register from './../jsx/Register.jsx';
ReactDOM.render((
<Router history={hashHistory}>
<div>
<Route path="/" component={App}/>
<Route path="/login" component={Login}/>
<Route path="/reg" component={Register}/>
</div>
</Router>
), document.getElementById('app'))
You need to configure the route to match the root path exactly. Try this...
<Route exact path="/" component={App}/>
Remove / from your path in Route path in
<Route path="/login" component={Login}/>
<Route path="/reg" component={Register}/>
try this it's working for me
entry class
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './Component/Layout.jsx';
import { Router, Route, IndexRoute, hashHistory } from "react-router";
import Archives from './Component/Archives.jsx';
import Settings from './Component/Settings.jsx';
import Featured from './Component/Featured.jsx';
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
//<IndexRoute component={Featured}></IndexRoute>
<Route path="archives" name="archives" component={Archives}></Route>
<Route path="settings" component={Settings}></Route>
<Route path="featured" component={Featured}></Route>
</Route>
</Router>,
document.getElementById('app'));
Layout class
{
render{
return(
<div>
{this.props.children}
<ul>
<li><Link to="archives">archives</Link></li>
<li><Link to="settings">settings</Link></li>
<li><Link to="featured">featured</Link></li>
</ul>
</div>
);
}
}
If you are using react router 4, then that looks fine. However, you can try using a as shown below:
<BrowserRouter>
<Switch>
<Route path="/" component={Home} />
</Switch>
</BrowserRouter>
This is in latest versions of react. The Home component is as below:
render() {
return (
<div>
<p>Header Section</p>
<Header/>
<p>Home component</p>
<Link to="/search">search</Link>
<Route path="/search" component={Search}/>
</div>
);
}
So most probably what you need to do is to just add a switch. Other solutions may be possible too. Hope this helps :)
Use BrowserRouter and Switch from 'react-router-dom'
if you use BrowserRouter no need to pass history as props as it handles itself.
Try this.
<Router>
<Switch>
<Route exact path="/" component={App}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/reg" component={Register}/>
</Switch>
</Router>
First of all, I'm using:
"react-router": "3.0.2",
browser-sync": "2.18.8",
"url-loader": "0.5.7",
"webpack": "1.13.1",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.2",
"material-ui": "0.17.0",
Ok, now Webpack HMR is working only when I edit reactjs components that are part of the main route, I mean: myurlapp.com/
But if a component is part from another route, example: myurlapp.com/form then the entire app is reloaded. Why is that?
My root js is this:
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import injectTapEventPlugin from 'react-tap-event-plugin';
require('./favicon.ico');
import './styles.scss';
import 'font-awesome/css/font-awesome.css';
import 'flexboxgrid/css/flexboxgrid.css';
injectTapEventPlugin();
render(
<Router routes={routes} history={browserHistory} />, document.getElementById('app')
);
routes.js is this:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import NotFoundPage from './containers/NotFoundPage.js';
import LoginPage from './containers/LoginPage';
import FormPage from './containers/FormPage';
import TablePage from './containers/TablePage';
import Dashboard from './containers/DashboardPage';
export default (
<Route>
<Route path="login" component={LoginPage}/>
<Route path="/" component={App}>
<IndexRoute component={Dashboard}/>
<Route path="dashboard" component={Dashboard}/>
<Route path="form" component={FormPage}/>
<Route path="table" component={TablePage}/>
<Route path="*" component={NotFoundPage}/>
</Route>
</Route>
);
And by the way, this is the entries of webpack:
entry: [
'./src/webpack-public-path',
'webpack-hot-middleware/client?reload=true',
'./src/index'
],
What other code should I show? This is what I see in the console of Chrome Dev Tools:
as you can see, I edited the code of Header.js and the update was made ok (without reloading the entire app) but if I edit another component, someone who is exclusive for a router different than the main / then the entire app is realoaded.
I tried to use the browserHistory to make the clean URLs, but when I access the web page, the page is blank and in my console I got <'noscript'> tag. I am using react-router v2.
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import App from './components/App';
import InputForm from './components/InputForm';
import FilterSummary from './components/FilterSummary';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
render((
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={InputForm} />
<Route path='/filter' component={FilterSummary} />
</Route>
</Router>
), document.getElementById('app'))
Server is WebLogic, so I am not sure how to configure it, as the example only shows it in Express JS. Any idea how to solve this?
EDIT:
Adding screenshot of the HTML response
All JSX is not rendered