Component from globalstyle
Global styles are visible only in this component, col-lg-2,col-md-4 -> globalstyle
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style
ReactDOM.render(
<AppContainer>
<BrowserRouter>
<App/>
</BrowserRouter>
</AppContainer>,
document.getElementById('root')
);
Component that should get styles
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'
const Header = () => (
<div className="row">
<div className={`col-lg-2 col-md-4 ${styles.test}`} > //Here is not available
<Link to="/категории">
<div className={styles.logoBox}>
<img src={icon} alt="logo"/>
<h1>Белый кот</h1>
</div>
</Link>
</div>
</div>
);
export default Header;
Webpack.config https://github.com/minaev-git/TestQuestion
Try adding global to your class name.
Eg
:global(.yourClass) {
//your css
}
Those styles will only be loaded if <Header /> appears somewhere in <App />. I'm assuming that's the case, but otherwise make sure that the header component shows up in <App />. If that's not working, try looking around your Network tab of the web inspector and reload the page -- see if your CSS is even being loaded.
EDIT: Just seeing where in the code your class isn't working. If .test is a class in your global styles file, it wouldn't show up in the Header.css file. Try removing "styles" and just give it a class of test if test is a class in flexboxgrid.min.css.
Import for CSS is
import './Header.css'
Reference the css classes in your component then with:
<div className="col-lg-2 col-md-4 test" >
You would need to import bootstrap to your index.jsx, currently you are only importing this, require('./basestyle/flexboxgrid.min.css') that is not enough, how will your system know that there is boostrap if its not imported
Related
I am a beginner with React and trying to do some Routing.
I'm trying to implement Route in React to redirect to another page, but everytime i insert , it shows error: Invalid hook call.
Here's the code from App.js
import React from 'react';
import './App.css';
import Nav from './Nav';
import EKGSim from './EKGSim';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className='App'>
<Nav />
<Routes>
<Route path="/ekgsim" element={<EKGSim/>} />
</Routes>
</div>
</Router>
)
}
export default App;
Can anyone tell me where the problem is?
I've been trying for hours searching for the solution but came up to nothing.
Any help will be appreciated! Thanks
Code for the Nav.js
import React from 'react';
import './App.css';
function Nav(){
return(
<nav>
<h3>Home</h3>
<ul className='nav-links'>
<li>Was Ist EKG?</li>
<li>EKG Component</li>
<li>EKG Simulator</li>
</ul>
</nav>
);
}
export default Nav;
and the EKGSim.js
import React from 'react';
import './App.css';
function EKGSim(){
return(
<div>
<h1>EKG Simulator
</h1>
</div>
);
}
export default EKGSim;
You need to use Route inside Routes try this
function App() {
return (
<Router>
<div className="App">
<Routes>
<Route path="/ekgsim" element={<EKGSim/>} />
</Routes>
</div>
</Router>
);
}
Problem solved!
I just run this command npm install --save react-router-dom
and it run perfectly!
I think the problem was that there was no react-router-dom in my package.json.
Thanks for everyone's answer!
I am creating a simple react project. I created an addStudent page. When I go through the link (../add), All components reload including Navbar. I want to reload only addStudent page without reloading Navbar. Can anyone help me?.
App.js
import React from "react";
import Header from "./components/header";
import AddStudent from "./components/addStudent";
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Header />
<Route path="/add" component={AddStudent} />
</div>
</Router>
);
}
export default App;
I am new to React and I am trying to create a sidebar having links to different pages or modules. I have everything modularized meaning, the sidebar Navigation is a separate module where I import all the linked classes and then use react-router-dom to redirect the paths. But somehow when redirecting, The response page is blank.
Navigation Module:
import React, { Component } from "react";
import { Route, Switch, Link } from "react-router-dom";
import Colors from "../../pages/Colors";
import Typography from "../../pages/Typography";
import Spaces from "../../pages/Spaces";
import Buttons from "../../pages/Buttons";
import Inputs from "../../pages/Inputs";
import Grid from "../../pages/Grid";
import "./style.css";
class Nav extends Component {
render() {
return (
<div className="nav">
<ul>
<li>
<Link to="/colors">Colors</Link>
</li>
<li>
<Link to="/typography">Typography</Link>
</li>
<li>
<Link to="/spaces">Spaces</Link>
</li>
<li>
<Link to="/buttons">Buttons</Link>
</li>
<li>
<Link to="/inputs">Inputs</Link>
</li>
<li>
<Link to="/grid">Grid</Link>
</li>
</ul>
<Switch>
<Route path="/colors" component={Colors} exact />
<Route path="/typography" component={Typography} exact />
<Route path="/spaces" component={Spaces} exact />
<Route path="/buttons" component={Buttons} exact />
<Route path="/inputs" component={Inputs} exact />
<Route path="/grid" component={Grid} exact />
</Switch>
</div>
);
}
}
export default Nav;
Now the link classes that I import here have just simple content right now like the following.
pages/Colors/index.js:
import React, { Component } from "react";
class Colors extends Component {
render() {
return (
<div>
<h1>Colors</h1>
</div>
);
}
}
export default Colors;
The main BrowserRouter is located in the App.js component from where the Sidebar component is called having Navigation component.
Now the thing is if I remove the BrowserRouter from App.js and put it in the Navigation module the routing works.
How come so?
Which pattern is the correct one?
When you work with React-router and React-router-dom, make sure the Router component is the top most parent.
You can try again by:
Move all Router, Switch into App.js.
Inside Sidebar component, just render links, neither Switch nor Route component.
It will work.
Similar to the answer from Shina, who covers it pretty well, just a few more comments. Keeping your React-Router and switch in your App.jsx file is relatively standard. Since App is the parent component, the Router and Switch will only be rendered once, while keeping the router in Nav.jsx would force the Switch re-rendered with each route. But keeping the Switch wrapped in the Router component should solve your issues here.
I am trying to implement the navigation bar component offered by react-bootstrap. But I am getting a weird error. Below is the screenshot of the stacktrace.
This is my code for navigation bar.
import React from "react";
import {Navbar, Nav, NavItem} from "react-bootstrap";
import navigationbarlogo from "../assets/images/navigationbarlogo.png"
import navstyle from "../assets/css/NavigationBar.css"
class NavigationBar extends React.Component{
render() {
return (
<Navbar bsStyle="inverse">
<Navbar.Header>
<Navbar.Brand style={navstyle}>
<img src={navigationbarlogo} alt={'logo for navigation bar'}/>
Tweelyze
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Analytics</NavItem>
<NavItem eventKey={2} href="#">About Us</NavItem>
</Nav>
</Navbar>
);
}
}
export default NavigationBar;
I am not able to figure out what is wrong here
check your imported component. we use import {component-name} from '' to import named export and import 'any-component-name' from '' to import default import.
I think it's the way your importing your styles, this error usually occurs when the module you imported does is not found. Can I see the directory of your file so that we can check if it loads there correctly?
So I am very new to React and react routing so forgive me if this is simple. I have seen similar questions asked but not quite what I was looking for or I didnt understand it enough to figure it out.
Question: How do I get routing to jump to the page? It changes in the URL but seemingly no change. (localhost:8080/#/listings?_k=26kljm) is the same as localhost:8080/
Anyway here is what I have
main.js
import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";
import Layout from "./components/Layout";
import Listing from "./components/pages/Listings";
import NoMatch from "./components/partials/NoMatch";
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<Route path="/listings" name="listings" component={Listing}></Route>
</Route>
</Router>,
app);
Layout.js
import React from "react";
import Footer from "./partials/Footer";
import Body from "./pages/Index";
import Header from "./partials/Header";
export default class Layout extends React.Component {
render() {
return (
<div>
<Header/>
<Body />
<Footer />
</div>
);
}
}
Header.js
This one is long so ill spare you but you should know there is a link
<Link to="/listings">Listings</Link>
And finally
Listings.js
import React from "react";
import Header from "../partials/Header";
import Footer from "../partials/Footer";
export default class Listings extends React.Component {
render(){
return(
<div>
<Header />
<div class="row">
<div class="col-md-8">
<h1>THIS SHOULD BE HERE</h1>
</div>
</div>
<Footer />
</div>
);
}
}
I feel like I am missing something small or I dont have a good grasp on components.
To Note: I just noticed in the source the Link created an href like this
Listings
Why is the extra hash there!?
I get a Cannot GET /listings if I go directly to localhost:8080/listings
At first sight, I cannot find any mistake in your code. But I would recommend you to check out the react router examples which will fit perfect to your case:
https://github.com/reactjs/react-router
Just clone this repo, run npm install and npm start. Then you can browse through the examples within the URL http:localhost:8080.
When you take a look at the "Active Links" example, you will notice that it shows exactly what you want (except HashHistory, but you can add this manually without much work).
Hope this helps.
Many greetings
So the problem was with how I was understanding components.
The key here is {this.props.children}
By changing Layout.js too:
export default class Layout extends React.Component {
render() {
return (
<div>
<Header/>
{this.props.children}
<Footer />
</div>
);
}
}
main.js
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Index}></IndexRoute>
<Route path="/listings" name="listings" component={Listing}></Route>
</Route>
</Router>,
app);
The makes routing work correctly