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.
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 am new in react. I just start learning and implementing react. In my project i have problem while using bootstrap.I am showing select boxes using bootstrap.When I refresh the page select boxes appears, when i change the route then select boxes disappears.
Here is code:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import './public/css/bootstrap.min.css';
import './public/css/bootstrap-select.min.css';
import './public/css/custom.css';
import 'jquery';
import 'bootstrap';
import 'bootstrap-select';
import App from './app/app.js';
import Dashboard from './app/Dashboard';
import RevenueReports from './app/Reports';
ReactDOM.render(
<Router history={browserHistory}>
<Route component={App}>
<Route path="/dashboard" component={Dashboard} />
<Route path="/revenue" component={RevenueReports} />
</Route>
</Router>,
document.getElementById('container')
);
No error is showing..
APP component:
import React, {Component, PropTypes} from 'react';
import Header from './Common/header.js'
import Middle from './Common/middle.js'
export default class App extends Component {
render() {
return (
<div className="main-wrapper">
<Header/>
<Middle location={this.props.location}>
{this.props.children}
</Middle>
</div>
);
}
}
Sidebar:
import React, {Component, PropTypes} from 'react';
import ActiveLink from "./active_links";
export default class Sidebar extends Component {
render() {
return (
<aside className="main-sidebar">
<section className="sidebar">
<ul className="sidebar-menu tree" data-widget="tree">
<ActiveLink to='/dashboard'>
<i className="icon-dashboard" />
</ActiveLink>
<ActiveLink to='/revenue'>
<i className="icon-revenue-report" />
</ActiveLink>
</ul>
</section>
</aside>
);
}
}
While using this:
componentDidMount(){
$('.selectpicker').selectpicker({
});
solve my problem.
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;
When I am clicking on the link "cake" I am getting the error the path is not matched or server is not able to find.
Here is my code for 3 files - Router, Navigation and detail components
Routers.js- component handling the routing
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import {CreateHashHistory} from 'history';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { browserHistory } from 'react-router';
import Base from './Base.jsx';
import ListDetail from './ListDetail.jsx';
let Routes =
<Router history={browserHistory}>
<Route path="/" component={Base} >
<Route path="/cake" component= {ListDetail}></Route>
</Route>
</Router>
export default Routes;
Navigation components - handling the navigaton links
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
class ContentList extends React.Component {
render(){
return(
<div id="innercontent">
<h2>What you love?</h2>
<ul >
<Link to={'/cake'}>Cakes</Link>
<Link to={'/icecream'}>icecream</Link>
<Link to={'/browin'}>browin</Link>
</ul>
</div>
)
}
}
export default ContentList;
Detail Component - Detail page to display
import React from 'react';
import ReactDOM from 'react-dom';
class ListDetail extends React.Component {
render(){
return(
<div>
<h1>hi Details</h1>
</div>
)
}
}
export default ListDetail;
Base.JSX
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header.jsx';
import Footer from './footer.jsx';
import ContentList from './contentList.jsx';
import FormElement from './form.jsx';
import ListDetail from './ListDetail.jsx';
class Base extends React.Component {
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
</section>
<Footer />
<ListDetail />
</div>
)
}
}
export default Base;
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router.jsx';
ReactDOM.render(Routes, document.getElementById('app'));
Thanks for the help!!
The render function of your base.jsx file should be something like this :
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
{this.props.children}
</section>
<Footer />
</div>
)
}
Route should be
<Route path="cake" component= {ListDetail} />
And the link :
<Link to="cake">Cakes</Link>
You need to render the routes somewhere.
...A single component to be rendered when the route matches the URL. It can be rendered by the parent route component with this.props.children. Read this.
const routes = (
<Route path="/" component={App}>
<Route path="groups" component={Groups} />
<Route path="users" component={Users} />
</Route>
)
class App extends React.Component {
render () {
return (
<div>
{/* this will be either <Users> or <Groups> */}
{this.props.children}
</div>
)
}
}
You don't need the / in /cake, it's already under /. Do it like this:
<Route path="cake" component={ListDetail} />
Try the following, not sure if it would help.
1. Use
var ContentList = React.createClass({})
instead of
class ContentList extends React.Component.
2. remove the / before 'cake' in your route path.
try using
var Routes = React.createClass({
render: function() {
return (
<div>
<Router history={browserHistory}>
and your updated code instead of let
hope it helps
Does it work with hashHistory ?
To use browserHistory, you need to set up server side rendering.
Here is the tutorial (especially lesson 11 and 13) which helped me understand and set up react-router using browserHistory and server side rendering:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/
Hope it helps.