Develop Reference

React Router not render

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>
);
}
}

React router issue

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;

React nested routing

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;

React Router always says no route even when they are set up

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>

activeClassName is not working for Link in component

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.