I was pushing code into github when somehow my react router code stopped working. The components are not rendering yet the url is changing. Even when I replace with a basic html tag, nothing renders. I am really lost and could use some help.
Dashboard.jsx
import React from "react";
import Home from './Home/homeDashboard.jsx'
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Map from '#material-ui/icons/MapOutlined';
import Test from './MyPlan/Modules.jsx';
function Dashboard() {
const routes = [
{
path: "/home",
main: () => <Home />
},
{
path: "/myplan",
main: () => <Test />,
},
];
return (
<div style={{ backgroundColor: '#F5F5F5', height: '100vh' }}>
<Router>
<div style={{ display: 'flex' }}>
<nav className={classes.nav}>
<IconButton className={classes.navBtn} component={Link} to="/home" style={{ color: "rgb(255,255,255)" }} >
<Tooltip title="Home" className={classes.toolTip}>
<HomeIcon />
</Tooltip>
</IconButton>
<IconButton className={classes.navBtn} component={Link} to="/myplan" style={{ color: "rgb(255,255,255)" }}>
<Tooltip className={classes.toolTip} title="My Plan" >
<Map />
</Tooltip>
</IconButton>
</nav>
<div style={{ flex: 1 }}>
<Switch>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
children={<route.main />}
/>
))}
</Switch>
</div>
</div>
</Router>
</div>
);
}
export default Dashboard;
Related
I'm experiencing an issue with the <Link> component from react-router-dom.
The above error occurred in the <Link> component:
at LinkWithRef (http://localhost:3000/react-portfolio/static/js/bundle.js:64573:7)
at button
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at ButtonBase (http://localhost:3000/react-portfolio/static/js/bundle.js:9678:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Button (http://localhost:3000/react-portfolio/static/js/bundle.js:9381:59)
at div
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Toolbar (http://localhost:3000/react-portfolio/static/js/bundle.js:20646:82)
at header
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Paper (http://localhost:3000/react-portfolio/static/js/bundle.js:18055:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at AppBar (http://localhost:3000/react-portfolio/static/js/bundle.js:8771:83)
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Box (http://localhost:3000/react-portfolio/static/js/bundle.js:23577:72)
at div
at Navbar (http://localhost:3000/react-portfolio/static/js/bundle.js:629:5)
at div
at PortfolioContainer (http://localhost:3000/react-portfolio/static/js/bundle.js:1060:88)
at div
at App
at Router (http://localhost:3000/react-portfolio/static/js/bundle.js:66149:15)
at BrowserRouter (http://localhost:3000/react-portfolio/static/js/bundle.js:64481:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18687
I'm guessing that this is located in my Navbar file somewhere, which you can see below:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import { Link } from 'react-router-dom';
import IconButton from '#mui/material/IconButton';
import Menu from '#mui/material/Menu';
import MenuIcon from '#mui/icons-material/Menu';
import MenuItem from '#mui/material/MenuItem';
import '../styles/root.css';
import useWindowDimension from '../utils/windowDimensions';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Portfolio from '../pages/Portfolio';
import Resume from '../pages/Resume';
export default function Navbar({ handlePageChange }) {
const { height, width } = useWindowDimension();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const [anchorElNav, setAnchorElNav] = React.useState(null);
const openNav = Boolean(anchorElNav);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
}
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Box sx={{ flexGrow: 1, width: "100%" }} >
<AppBar position="static" id="navbar">
<Toolbar>
<Typography
id="nav-logo"
variant="h6"
component="div"
sx={{ flexGrow: 1 }}
fontFamily="reklame-script, sans-serif"
fontWeight="700"
fontStyle="normal"
fontSize="36px"
// onClick={() => handlePageChange('About')}
>
My Portfolio
</Typography>
{width >= 900
?
<div
style={{ display: "flex", direction: "row", flexWrap: "wrap", justifyContent: "space-evenly", alignContent: "center", fontWeight: "bold" }}
>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('About')}
>
<Link to={<About />}>
About Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Portfolio')}
>
<Link to={<Portfolio />}>
Portfolio
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Contact />}>
Contact Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Resume />}>
Resume
</Link>
</Button>
</div>
:
// Mobile Hamburger Menu
<Box id='hamburger-menu' sx={{ flexGrow: 1, display: { xs: "flex", md: "none" }, justifyContent: "right" }}>
<IconButton
id="menu-button"
size="large"
aria-controls={openNav ? 'menu-appbar' : undefined}
aria-haspopup="true"
aria-expanded={openNav ? 'true' : undefined}
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={openNav}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
<div>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" >
<Link style={{ textDecoration: "none", color: "black" }} to="/" onClose={handleClose}>
About Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to={"/portfolio"}>
Portfolio
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/contact">
Contact Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/resume">
Resume
</Link>
</Button>
</MenuItem>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
onClick={handleClick}
onClose={handleClose}
>
</Menu>
</div>
</Menu>
</Box>
}
</Toolbar>
</AppBar>
</Box>
</div>
);
}
If it's not there, perhaps it's in my PortfolioContainer file? This can be seen below.
import React, { useState } from "react";
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
const [currentPage, setCurrentPage] = useState('');
const renderPage = () => {
if (currentPage === '/') {
return <About />
}
if (currentPage === '/resume') {
return <Resume />;
}
if (currentPage === '/portfolio') {
return <Portfolio />;
}
if (currentPage === '/contact') {
return <Contact />;
}
// return <About />;
};
const handlePageChange = (page) => setCurrentPage(page);
return (
<div id="portfolioContainer">
<Navbar currentPage={currentPage} handlePageChange={handlePageChange} />
{renderPage()}
<Footer />
</div>
);
};
Thank you in advance for any and all help!
I assumed you are useing react-router-dom#6.6.1 (latest version). "to" prop from component expect a string but you provide the component. That's why you get cyclic object error. I took your code an defined a router in index.js file like this
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Resume from "./Resume";
const router = createBrowserRouter([
{
path: "/",
element: <App />
},
{
path: "/resume",
element: <Resume />
}
]);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);
and in my App.js file I used Link component like this
<Button
color="inherit"
onClose={handleClose}
>
<Link to="/resume">Resume</Link>
</Button>
The issue it seems is that you aren't using react-router to its fullest. The Link component should be specifying a to prop that matches a URL pathname that you are rendering a Route component for. PortfolioContainer should be rendering the routes you are trying to link to from the Navbar component.
Example:
PortfolioContainer
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
return (
<BrowserRouter>
<div id="portfolioContainer">
<Navbar />
<Routes>
<Route path="/" element={<About />} />
<Route path="/resume" element={<Resume />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/contact" element={<Contact />} />
</Routes>
<Footer />
</div>
</BrowserRouter>
);
};
Navbar
...
<Link to="/">
About Me
</Link>
...
<Link to="/portfolio">
Portfolio
</Link>
...
This question already has answers here:
Link tag inside BrowserRouter changes only the URL, but doesn't render the component
(2 answers)
Closed 9 months ago.
My problem is that when I click on an element defined by Route, the URL changes but the page does not change and I have to reload the page once to change the page.
i have no idea what is happening here
Node.js: 16.5
npm: 8.10.0
react-router-dom: 5.3.1
Thanks for your help
Routes:
import React from "react";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import Login from "../Login/login";
import Navbar from "../Navbar/navbar";
export default function Routers(){
return(
<BrowserRouter>
<Switch>
<Route path="/log-in">
<Login />
</Route>
<Route path="/">
<Navbar />
</Route>
</Switch>
</BrowserRouter>
);
}
navbar.js:
import React from "react";
import * as Mu from "#mui/material";
import { Link } from "react-router-dom";
export default function Navbar(){
return(
<Link to="/log-in">
<Mu.Button variant="contained" color="success">Log in</Mu.Button>
</Link>
)
}
App.js:
import React from "react";
import Routers from "./commponents/Routes/routes";
function App() {
return (
<div className="App">
<Routers />
</div>
);
}
export default App;
login.js:
import React from "react";
import * as Mu from "#mui/material";
import * as Icons from "#mui/icons-material";
import study from "../.././assets/img/study.jpg"
import uni from "../.././assets/img/Uni-3.png";
import homework from "../.././assets/img/homework.jpg";
export default function Login(){
return (
<Mu.Grid container className="h-100 justify-content-center">
<Mu.Grid item sm={12} className="text-center login">
<Mu.Box className="login-box d-inline-block">
<Mu.Grid container dir="rtl" className="h-100">
<Mu.Grid item xs={12} md={7} className="login">
<div className="w-100">
<Mu.Card sx={{ maxWidth: "100%" }} className="d-md-none d-sm-block d-block login-card">
<Mu.CardMedia component="img" alt="green iguana" width="100%" height="100" className="login-card" image={homework}/>
</Mu.Card>
<Mu.Container fixed>
<Mu.Avatar alt="profile" className="text-center bg-white border d-inline-block ms-3 mb-3 prof-pic" src={uni} sx={{ width: 70, height: 70 }}/>
<h4 className="ps-md-4 ps-sm-0 ps-0">ورود به پنل مدیران</h4>
<Mu.Box sx={{ display: 'flex', width:"100%", alignItems: 'flex-end' }} className="px-md-3 px-sm-0 px-0">
<Icons.Person sx={{ color: 'action.active', mr: 1, ml: 3 }} />
<Mu.TextField id="username" label="نام کاربری" className="w-75" variant="standard" />
</Mu.Box>
<Mu.Box sx={{ display: 'flex', width:"100%", alignItems: 'flex-end', mt: 1 }} className="px-md-3 px-sm-0 px-0">
<Icons.Lock sx={{ color: 'action.active', mr: 1, ml: 3 }} />
<Mu.TextField id="password" label="رمز عبور" className="w-75" variant="standard" />
</Mu.Box>
<Mu.Button sx={{ mt: 4, width: "50%"}} variant="contained">ورود</Mu.Button>
</Mu.Container>
</div>
</Mu.Grid>
<Mu.Grid item xs={12} md={5} className="h-100 d-md-block d-sm-none d-none">
<img src={study} width="100%" height="100%" className="login-img" />
</Mu.Grid>
</Mu.Grid>
</Mu.Box>
</Mu.Grid>
</Mu.Grid>
);
}
Add exact attribute to your index route <Route exact path="/">.
If it does not work try wrapping components with withRouter: <Route exact path="/" component={withRouter(Component)}
Also move <BrowserRouter> to your main file, example:
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
I have these buttons to which I would like to add link for redirect:
<Tooltip title="Open New Ticket">
<IconButton aria-label="filter list">
<AddTwoToneIcon />
</IconButton>
</Tooltip>
I added this:
<Tooltip title="Open New Ticket">
<Link to='open-ticket'>
<IconButton aria-label="filter list">
<AddTwoToneIcon />
</IconButton>
</Link>
</Tooltip>
But when I press the button I'm not redirected to a new page. This button for example is working fine:
<Link to='open-ticket'>
<Button
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Open Ticket
</Button>
</Link>
Do you know what is the proper way to implement this functionality?
Make sure you have installed react-router-dom. #material-ui/core/Link will not work.
Import BrowserRouter from react-router-dom and wrap your root component within.
import { BrowserRouter } from "react-router-dom"
import Root from "./views/Routes";
...
const App = props => {
return (
<BrowserRouter>
<Root />
</BrowserRouter>
);
}
In your Root component, specify the Routes with path and render component and wrap them inside Switch component. Switch enforces that only one of the Route children are matched. The URL is evaluated against Route components inside Switch and the first Route component whose path is a prefix-match of URL, is rendered. That is why you have to be careful of the order of Route components inside Switch
import { Fragment } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Main from "./Main";
import Home from "./Home";
import About from "./About";
import NotFound from "./404";
const Root = (props) => {
return (
<Fragment>
<Main />
<Switch>
<Route path="/about" render={(p) => <About {...p} />} />
<Route path="/404" render={(p) => <NotFound {...p} />} />
<Route path="/" render={(p) => <Home {...p} />} />
<Redirect to="/404" />
</Switch>
</Fragment>
);
};
export default Root;
Use Link from react-router-dom
import { Link } from "react-router-dom";
import { Tooltip, IconButton, Grid } from "#material-ui/core";
import { HomeTwoTone, InfoTwoTone } from "#material-ui/icons";
const Main = (props) => {
return (
<Grid container spacing={2} justifyContent="center">
<Grid item>
<Tooltip title="Home Page">
<Link to="/">
<IconButton aria-label="filter list">
<HomeTwoTone />
</IconButton>
</Link>
</Tooltip>
</Grid>
<Grid item>
<Tooltip title="About Page">
<Link to="/about">
<IconButton aria-label="filter list">
<InfoTwoTone />
</IconButton>
</Link>
</Tooltip>
</Grid>
</Grid>
);
};
export default Main;
Here is a working demo
Inside your button you can add:
onClick={event => window.location.href='/your-href'}
Summary
I'm building an electron app with react. Currently I have 2 main routes - a login page, and a dashboard. The dashboard has 3 sub routes controlled by a sidebar. The 3 sub routes - home, install, and settings - are displayed in a main content area alongside the sidebar. This approach works fine by itself. The issue arises when I string in the login page. I've been successful in routing from the login to the main page area, but the sub routes fail to render when I do so.
The problem
When I route from login, to the dashboard, my layout appears fine. Once i click on an option in the sidebar, the DOM goes blank. I've moving around my routes and divs, but haven't had much luck this way. Here is the code for my setup. Sometimes, I can even see a flash of the main content that should be there before it blanks.
Another thing I've tried is changing my entry point router to include a <Switch> above the 2 routes. With that setup, I could get from login, to dashboard, but clicking a sidebar option would send me back to login.
index.js - entry point
const routing = (
<HashRouter>
<Route exact path="" component={Auth}/>
<Route exact path="/dashboard" component={Layout} />
</HashRouter>
)
ReactDOM.render(routing, document.getElementById('root'));
When the input from auth is correct, I run this:
if(this.state.loginResult){
return(
<Redirect to={'/dashboard'} />
)
Layout.js - the dashbaord.
render() {
return (
<HashRouter>
<div>
<Installer onRef={ref => (this.child = ref)} />
<div className={'sideBar'}>
<div className={'navSelect'}>
<NavLink to={'/home'} activeClassName="navOptionActive" >
<div className={'navOption'} >
<HomeIcon
style={{fontSize: 75, textAlign: 'center', alignSelf: 'center',
color: 'white', marginTop: 10, marginBottom: 0}}/>
<h1>Home</h1>
</div>
</NavLink>
<NavLink to={'/test'} activeClassName="navOptionActive">
<div className={'navOption'}>
<Brightness3Icon
style={{fontSize: 75, textAlign: 'center', alignSelf: 'center',
color: 'white', marginTop: 10, marginBottom: 0}}/>
<h1>Nightly</h1>
</div>
</NavLink>
<div className={'bottom'}>
<NavLink to={'/nothing'} exact activeClassName="navOptionActive">
<div className={'navOption'} id={'settings'}>
<SettingsIcon
style={{fontSize: 75, textAlign: 'center', alignSelf: 'center',
color: 'white', marginTop: 10, marginBottom: 0}}/>
<h1>Settings</h1>
</div>
</NavLink>
</div>
</div>
</div>
{/*Main content area. This is where the content from the sidebar options will be displayed. */}
<div className={'mainContent'} >
<Route path="/home">
<App />
</Route>
<Route path="/test">
<TestPage install={this.install} />
</Route>
</div>
</div>
</HashRouter>
Also note, I don't have a settings page linked up yet which is why one of the navlinks goes to /nothing.
Remove the nested hashRouting from the Layout component and add Switch to the top component.
index.js - entry point
const routing = (
<HashRouter>
<Switch>
<Route exact path="" component={Auth}/>
<Route exact path="/dashboard" component={Layout} />
</Switch>
</HashRouter>
)
ReactDOM.render(routing, document.getElementById('root'));
Layout.js - the dashbaord.
render() {
return (
<div>
<Installer onRef={ref => (this.child = ref)} />
<div className={'sideBar'}>
<div className={'navSelect'}>
<NavLink to={'/home'} activeClassName="navOptionActive" >
<div className={'navOption'} >
<HomeIcon
style={{fontSize: 75, textAlign: 'center', alignSelf: 'center',
color: 'white', marginTop: 10, marginBottom: 0}}/>
<h1>Home</h1>
</div>
</NavLink>
<NavLink to={'/test'} activeClassName="navOptionActive">
<div className={'navOption'}>
<Brightness3Icon
style={{fontSize: 75, textAlign: 'center', alignSelf: 'center',
color: 'white', marginTop: 10, marginBottom: 0}}/>
<h1>Nightly</h1>
</div>
</NavLink>
<div className={'bottom'}>
<NavLink to={'/nothing'} exact activeClassName="navOptionActive">
<div className={'navOption'} id={'settings'}>
<SettingsIcon
style={{fontSize: 75, textAlign: 'center', alignSelf: 'center',
color: 'white', marginTop: 10, marginBottom: 0}}/>
<h1>Settings</h1>
</div>
</NavLink>
</div>
</div>
</div>
{/*Main content area. This is where the content from the sidebar options will be displayed. */}
<div className={'mainContent'} >
<Switch>
<Route path="/home">
<App />
</Route>
<Route path="/test">
<TestPage install={this.install} />
</Route>
</Switch>
</div>
</div>
Login Alternative
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import SignIn from "layouts/SignIn";
const hist = createBrowserHistory();
const loggedRoutes = () => (
<Switch>
<Route path="/" component={SignIn} />
<Route path="/admin" component={Admin} />
<Redirect from="/admin" to="/admin/aboutUs/whatWeDo" />
</Switch>
);
const routes = () => (
<Switch>
<Route path="/" component={SignIn} />
<Route path="/login" component={Admin} />
<Redirect from="/" to="/login" />
</Switch>
);
ReactDOM.render(
<Router history={hist}>
{checkIfAuth? loggedRoutes():routes()}
</Router>,
document.getElementById("root")
);
Hope it helps
I have problem with my app. In my header i have Twitter, Youtube, Instgram which is if i click one of them it will show the page from the component. Example if i click instagram it will load Instagram Component and change the page to Instagram. But in my app, after i click one of them the pages not changes and not load the component but the url changes. This is my code :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Row, Col, Card, Layout, Spin } from "antd";
import "antd/dist/antd.css";
import "./index.css";
import cubejs from "#cubejs-client/core";
import { QueryRenderer } from "#cubejs-client/react";
import { Line, Bar, Pie } from "react-chartjs-2";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Facebook from "./Facebook";
import Youtube from "./Youtube";
import Instagram from "./Instagram";
import Twitter from "./Twitter";
import moment from "moment";
const AppLayout = ({ children }) => (
<Layout>
<Layout.Header>
<div
style={{
float: "left"
}}
>
<h2
style={{
color: "#fff",
margin: 0
}}
>
NARASIDATA
</h2>
</div>
<Router>
<div
style={{
float: "right"
}}
>
<Link to="/facebook/" component={Facebook}>
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Facebook
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/instagram/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Instagram
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/youtube/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Youtube
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/twitter/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Twitter
</h2>
</Link>
</div>
</Router>
</Layout.Header>
<Layout.Content
style={{
padding: "0 25px 25px 25px",
margin: "25px"
}}
>
{children}
</Layout.Content>
</Layout>
);
const Dashboard = ({ children }) => (
<Row type="flex" justify="space-around" align="top" gutter={24}>
{children}
</Row>
);
const DashboardItem = ({ children, title }) => (
<Col span={24} lg={12}>
<Card
title={title}
style={{
marginBottom: "24px"
}}
>
{children}
</Card>
</Col>
);
const COLORS_SERIES = ["#FF6492", "#141446", "#7A77FF"];
const lineRender = ({ resultSet }) => {
const data = {
labels: resultSet.categories().map(c => c.category),
datasets: resultSet.series().map((s, index) => ({
label: s.title,
data: s.series.map(r => r.value),
borderColor: COLORS_SERIES[index],
fill: false
}))
};
const options = {};
return <Line data={data} options={options} />;
};
const API_URL = "http://localhost:4000";
const cubejsApi = cubejs(
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1NjI4MjQ2NjYsImV4cCI6MTU2MjkxMTA2Nn0.h9s4qtiFSia8vHqtyYNwkJDihh-_NcCD57wozOmmz4k",
{
apiUrl: API_URL + "/cubejs-api/v1"
}
);
const renderChart = Component => ({ resultSet, error }) =>
(resultSet && <Component resultSet={resultSet} />) ||
(error && error.toString()) || <Spin />;
function App() {
return (
<div className="App">
<AppLayout>
<Dashboard>
<DashboardItem>
<Router>
<Route exact path="/twitter/" component={Twitter} />
<Route exact path="/youtube/" component={Youtube} />
<Route exact path="/instagram/" component={Instagram} />
<Route exact path="/facebook/" component={Facebook} />
</Router>
<QueryRenderer
query={{
measures: ["Twitter.retweetcount"],
timeDimensions: [
{
dimension: "Twitter.publishat",
granularity: "day",
dateRange: "This month"
}
],
filters: [
{
dimension: "Twitter.username",
operator: "equals",
values: ["narasitv"]
}
]
}}
cubejsApi={cubejsApi}
render={renderChart(lineRender)}
/>
</DashboardItem>
</Dashboard>
</AppLayout>
</div>
);
}
export default App;
What's the problem in my app?
I am new in react.
You should only have one <Router /> so remove the one around your links in AppLayout and wrap your whole App render in <Router /> like this:
<Router>
<AppLayout>
<Route />
<Route />
// ...
</AppLayout>
</Router>
Also you should replace Router by a BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter