Hi i have problems getting routes work.
Here is my route.js
import React, { Component } from 'react';
import Home from './Home';
import Add from './Add';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
export default (
<Router history={browserHistory}>
<IndexRoute component={Home}/>
<Route path='/' component={Home} />
<Route path='/add/' component={Add} />
</Router>
);
Here is App.js
import React, { Component } from 'react';
import routes from './route';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router history={hashHistory}>{routes}</Router>
);
}
}
export default App;
Here is Add.js
import React, { Component } from 'react';
import Header from './Views/Header';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
import './styles/App.css';
import './styles/layout.css';
class Add extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className=" ">
<Header />
<h2> Add a cake </h2>
</div>
);
}
}
export default Add;
I haven't added Home.js because Home works just fine.
but when i click '/add' url points to 'http://localhost:3000/add#/' but nothing happens.
can you please help.
Thanks
The problem is you are using a Router within a Router in App.js, one with hashHistory and the other with browserHistory.
Change your Routes to
import React, { Component } from 'react';
import Home from './Home';
import Add from './Add';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
export default (
<Router history={browserHistory}>
<IndexRoute component={Home}/>
<Route path='/' component={Home} />
<Route path='/add' component={Add} />
</Router>
);
and app.js to
import React, { Component } from 'react';
import routes from './route';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>{routes}</div>
);
}
}
export default App;
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 am having issues with my reactJS routes, When I click on a link, the URL changes on the address bar but it won't render the component except I reload the page.
This is my code:
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';
if (document.getElementById('root')) {
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/home" component={Home} exact={true} />
<Route path="/products/add" component={CreateProduct} exact={true} />
<Home />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
}
Home.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link, BrowserRouter} from "react-router-dom";
export default class Home extends Component {
render(){
return(
<BrowserRouter>
<Link className="nav-link" to="/products/add">Create Product</Link>
</BrowserRouter>
);
}
}
CreateProduct.js
import React, {Component} from 'react';
import {Link, BrowserRouter} from "react-router-dom";
export default class CreateProduct extends Component{
render(){
return(
<BrowserRouter>
<Link className="nav-link" to="/home"></Link>
</BrowserRouter>
);
}
}
Please what am I missing here?
I copied your code and I don't have any issue when I don't use nested BrowserRouters, as you have used. I think you only need the root one, in Index.js
As you already wrapped your app with browser router it's properties are applied to everything it wraps so you don't need to use it in every component.
Also if you want the route to be exact just write exact instead exact={true}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';
if (document.getElementById('root')) {
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/home" component={Home} exact />
<Route path="/products/add" component={CreateProduct} exact />
<Home />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link} from "react-router-dom";
export default class Home extends Component {
render(){
return(
<Link className="nav-link" to="/products/add">Create Product</Link>
);
}
}
I have a very simple project and react router dom is not rendering components. Sometimes it renders the component for first route but then it doesn't render.
Here's the code for App.js:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import store from "./store";
import createHistory from 'history/createBrowserHistory';
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
browserHistory.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default App;
All the route components are simple component with a span tag only.
Please help
You can try wrapping your component with WithRouter and then changing the route with this.props.history.push()
Try
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import {withRouter} 'react-router';
import store from "./store";
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
this.props.history.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default withRouter(App);
How to add Auth0 with React PropTypes?
index.js
import App from '../components/App';
import WelcomeRoute from './Welcome';
import SettingsRoute from './Settings';
import CampaignRoute from './Campaign';
export default {
path: '/',
component: App,
indexRoute: WelcomeRoute,
childRoutes: [
SettingsRoute,
CampaignRoute
]
};
App.js
import React, {PropTypes} from 'react';
import Header from '../../components/Header';
import MessagesStack from '../../components/MessagesStack'
const App = ({children}) => (
<div>
<Header />
<section className="ui main container">
<MessagesStack />
{children}
</section>
</div>
);
App.propTypes = {
children: PropTypes.element.isRequired
};
export default App;
The sample from Auth0 show this:
App.js
import React, {Component} from 'react';
import {Router, Route, browserHistory} from 'react-router';
import {requireAuth} from '../auth';
import Site from './Site';
import Home from './Home';
import Login from './Login';
import EditProfile from './EditProfile';
class App extends Component {
render() {
return (
<Router history={browserHistory}>
<Route component={Site}>
<Route path="/" component={Home} />
<Route path="/login" component={Login} />
<Route onEnter={requireAuth}>
{/* Place all authenticated routes here */}
<Route path="/profile/edit" component={EditProfile} />
</Route>
</Route>
</Router>
);
}
}
export default App;
If your component depends on Auth0 user profile and/or AuthService you could do following
import React, { PropTypes as T } from 'react'
...
import AuthService from 'utils/AuthService'
...
export class ProfileEdit extends React.Component {
static propTypes = {
profile: T.object,
auth: T.instanceOf(AuthService)
}
.
.
.
}
Here is the complete sample for it https://github.com/auth0-samples/auth0-react-sample/blob/master/04-User-Profile
and specifically here you can see how PropTypes is used with respect to Auth0 user profile and AuthService https://github.com/auth0-samples/auth0-react-sample/blob/master/04-User-Profile/src/components/Profile/ProfileEdit.js#L8
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;