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;
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;
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've just started with Meteor and React and most everything I've seen for routers points me to react-router. I've pulled some code from the simple-todos branch and set up a "/" route but keep getting the error router.js:347 There is no route for the path: /. The page shows the content but I don't understand why this error is showing. I've tried Googling for answers and I can't find anything to help me solve this. I've also tried creating <Link /> elements to have links send me to other pages and that doesn't work either.
Here is my code:
Routes.jsx
import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { render } from 'react-dom';
import Home from '../../ui/layouts/Home.jsx';
import SignUpPage from '../../ui/pages/SignUpPage.jsx';
export const renderRoutes = () => (
<Router history={browserHistory}>
<Route path="/" component={Home} />
</Router>
);
Home.jsx
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { RouteHandler } from 'react-router';
import NavBase from '../components/nav/NavBase.jsx';
import Splash from '../components/home/Splash.jsx';
import Snapshot from '../components/home/Snapshot.jsx';
import FooterCTA from '../components/home/FooterCTA.jsx';
import JoinModal from '../components/accounts/JoinModal.jsx';
import LogInModal from '../components/accounts/LogInModal.jsx';
import '../stylesheets/bootstrap.min.css';
import '../stylesheets/style.css';
export default class Home extends Component {
render() {
return (
<div>
<NavBase />
<Splash />
<Snapshot />
<FooterCTA />
<LogInModal />
{this.props.children}
</div>
)
}
}
Home.propTypes = {
currentUser: React.PropTypes.object,
children: React.PropTypes.element,
};
main.jsx
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx';
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('app'));
});
Any help with this would be greatly appreciated! Been stuck for a while now and would like to be able to move on.
It looks like you have declared Home as your App layout, then you would have your routes below like this:
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/another" component={Another}/>
</Route>
</Router>
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.