i have component that import a Link from react-router-dom
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Sidebar extends Component{
render() {
return (
<div className="be-left-sidebar">
<div className="left-sidebar-wrapper">Blank Page
<div className="left-sidebar-spacer">
<div className="left-sidebar-scroll">
<div className="left-sidebar-content">
<ul className="sidebar-elements">
<li className="divider">Menu</li>
<li className="parent"><i className="icon mdi mdi-home" /><span>Home</span>
<ul className="sub-menu">
<li><Link to='/'>Home</Link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div className="progress-widget">
<div className="progress-data"><span className="progress-value">60%</span><span className="name">Current Project</span></div>
<div className="progress">
<div style={{width: '60%'}} className="progress-bar progress-bar-primary" />
</div>
</div>
</div>
</div>
);
}
};
export default Sidebar;
then console.log shows an error
Warning: Failed context type: The context router is marked as required in Link, but its value is undefined.
Cannot read property 'history' of undefined
`
i am new in react and i am using react router v4.1.1
anyone can help me?
thanks
Make sure you have your component appearing inside <Router> component.
In React router v4, we have Switch, Route and Link components that we import from react-router-dom and configure our router as follows:
import { Switch, Route, Link } from 'react-router-dom';
<span>LINKS:</span>
<ul>
<li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
<li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
<li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
</ul>
<Switch>
<Route exact path='/' component={LeftSubDefault} />
<Route path='/left-sub1' component={LeftSubOne} />
<Route path='/left-sub2' component={LeftSubTwo} />
</Switch>
In the app.js or whatever your entry file is. Wrap your App component inside BrowserRouter as follows:
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>
Here is a wonderful article that may help.
Related
ReactJS router doesn't load the component in different route unless I refresh , even though I've created a different project with same installations and It does work properly, but in my current project it doesn't.
App.js
import React, {Component} from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Navigation from './components/Navigation'
import Home from './components/Home'
import Blogs from './components/Blogs'
import Footer from './components/Footer'
import Services from './components/Services'
class App extends Component {
render(){
return (
<BrowserRouter>
<div className='grid-container'>
<Navigation />
<div className='content'>
<Route path='/blogs' component={Blogs} />
<Route path='/' component={Home} exact/>
<Route path='/' component={Services}/>
</div>
<Footer />
</div>
</BrowserRouter>
);
}
}
export default App;
Home.js
import React from 'react';
import {Link, BrowserRouter} from 'react-router-dom'
const Home = () => {
return (
<BrowserRouter>
<section className="carousel-section-wrapper home">
<div className="carousel-inner">
<div className="carousel-section carousel-item active clip-bg pt-225 pb-200 img-bg">
<div className="container">
<div className="row">
<div className="col-xl-8 col-lg-10 mx-auto">
<div className="carousel-content text-center">
<div className="section-title">
<h2>test content</h2>
<p className="text-white">test content</p>
</div>
<Link to="/blogs" className="theme-btn">Read My Blogs</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</BrowserRouter>
)
}
export default Home
Blogs.js
import React from 'react';
const Blogs = () => {
return (
<h1>Blogs</h1>
)
}
export default Blogs
Expected result: componetns home and services disappear, and blogs component appear when I click to any button redirects to /blogs
Actual result: the state of the page stays the same unless I refresh the browser
your help would be appreciated.
You've used BrowserRouter in nested components, in your App and Home components and it won't work this way. To fix this, you only must have the BrowserRouter in the App component.
I'm using react-router and I separated it as its own component and it works fine but the only issue is that the text from that said routed page appears in the navbar. I'm relatively new to React so if there's anything I'm doing wrong that could be done better, I would love to know!
Code Sandbox
You could move Switch to Home.js:
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomeNav from "./NavBar";
import "./NavBar.css";
import Account from "./Account";
import Friends from "./Friends";
class Home extends React.Component {
render() {
return (
<div>
<Router>
<HomeNav />
<h1>
"this is the friends/account tab" <br />text should be here
</h1>
<Switch>
<Route path="/account" component={Account} />
<Route path="/friends" component={Friends} />
</Switch>
</Router>
</div>
);
}
}
export default Home;
Only put links in Routing.js
class Routing extends React.Component {
render() {
return (
<div>
<ul>
<li>
<Link to="/friends">friends</Link>
</li>
<li>
<Link to="/account">account</Link>
</li>
</ul>
</div>
);
}
}
In my understanding is that the component is only showed where the Switch declared.
i am using react-router-dom in my project when i am proving routes instead of rendering the component in another page dom rendering component in the same page below my first component
My App.js
import React,{Component} from 'react';
import './App.css'
import Layout from './components/front/layout'
import FirstPage from './components/index/firstpage';
import {BrowserRouter ,Switch,Route} from 'react-router-dom';
class App extends Component {
render(){
return (
<div className="container">
<BrowserRouter>
<FirstPage/>
<Switch>
<Route path='/Layout' exact component={Layout} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
My another middlePortion.js where i am using imported from react-router-dom to route to another page
import React from 'react';
import { Button, Form } from 'reactstrap';
import axios from 'axios';
import '../../css/style.css'
import {Link} from 'react-router-dom'
class Middleportion extends React.Component {
constructor(props){
super(props);
this.Submit = this.Submit.bind(this);
}
render() {
const layStyle={
color:'white'
};
return (
<div className='row frnt'>
<div className="col-md-3">
</div>
<div className="col-md-6 am ">
<div className="row align-items-center">
<div className="row justify-content-center bg-primary pp">
<ul className="list-unstyled">
<li><Link style={layStyle} to='/Layout'>
male
</Link></li>
</ul>
</div>
</div>
</div>
<div className="col-md-3">
</div>
</div>
);
}
}
export default Middleportion;
I want to render my Layout component on separate page but its rendering on the same page please help me out
The problem with your code is that you're rendering FirstPage manually as if to be hard coded.
In order to get FirstPage and Layout to render in separate routes, you need to create a separate route inside your <Switch> and use FirstPage as the component prop like you did with Layout.
It would look like this:
(
<div className="container">
<BrowserRouter>
<Switch>
<Route exact path='/' component={FirstPage} />
<Route exact path='/Layout' component={Layout} />
</Switch>
</BrowserRouter>
</div>
)
With the setup above, the FirstPage component would render only on the / route and the Layout component would only render on the /layout route.
This is my react component. I create a bootstrab tab view and calling the component. But any of my component is not render
import React, { Component } from 'react';
import Ndtv from './ndtv';
import Republic from './republic';
import Zeenews from './Zeenews';
import {Link,Route} from 'react-router-dom';
class NewsListView extends Component {
render() {
return (
<div>
<h1>News</h1>
<ul className="nav nav-tabs">
<li><Link data-toggle="tab" to="/ndtv-news">Ndtv</Link></li>
<li><Link data-toggle="tab" to="/republic-news">Republic</Link></li>
<li><Link data-toggle="tab" to="/zeenews-news">Zee News</Link></li>
</ul>
<div>
<div className="tab-content">
<Route exact path="/ndtv-news" component={Ndtv} />
<Route exact path="/republic-news" component={Republic} />
<Route exact path="/zeenews-news" component={ Zeenews } />
</div>
</div>
</div>
)
}
}
export default NewsListView;
When I click on any of the tab I am getting following
unrecognised expression unrecognized expression: /republic-news.
You have to wrap your routing components with BrowserRouter as mentioned here. . Also remove data-toggle.
I've got a problem with Link in react router in one component. Once I try to use Link, the console shows this error: Failed context type: The context router is marked as required in Link, but its value is undefined. I've seen all similar threads about this problem here, but there's no solution to this exact issue. I'm using all the latest versions of all frameworks and componets (just downloaded everything a couple of days ago), so it's definitely not about upgrading anything.
The structure is like this:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import { Link } from 'react-router-dom';
import About from './components/About';
import Posting from './components/Posting';
import Groups from './components/Groups';
ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={About} />
<Route path='/post' component={Posting} />
<Route path='/groups' component={Groups} />
</div>
</Router>,
document.getElementById('content')
);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import { Link } from 'react-router-dom';
import SideMenuUserInfo from './components/sidemenu/SideMenuUserInfo';
import SideMenu from './components/sidemenu/SideMenu';
import SideMenuFooter from "./components/sidemenu/SideMenuFooter";
import TopNav from "./components/topnav/TopNav";
class App extends Component {
render() {
return(
<div className="main_container">
<div className="col-md-3 left_col">
<div className="left_col scroll-view">
<div className="navbar nav_title" style={{border: 0}}>
<i className="fa fa-paw"></i> <span>Logo here</span>
</div>
<div className="clearfix"></div>
<SideMenuUserInfo />
<br />
<SideMenu />
<SideMenuFooter />
</div>
</div>
<TopNav />
<div id="content" className="right_col" role="main">
</div>
<footer>
<div className="pull-right">
Footer text here
</div>
<div className="clearfix"></div>
</footer>
</div>
);
}
}
export default App;
SideMenuUnfoldLink.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class SideMenuUnfoldLink extends Component {
render() {
return(
<li>
<a>
<i className={this.props.faClass}></i>{this.props.text}<span className="fa fa-chevron-down"></span>
</a>
<ul className="nav child_menu">
<li><Link to="/">Home</Link></li> <<<<-- THE PROBLEM IS HERE
</ul>
</li>
);
};
}
export default SideMenuUnfoldLink;
And About.js (as a working example of Link)
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class About extends Component {
render() {
return (
<div>
<h2>Это About</h2>
<ul>
<li><Link to="/groups">Groups</Link></li>
<li><Link to="/">Main</Link></li>
</ul>
</div>
);
}
}
export default About;
The Link works with the About component like a charm. The error starts to pop up once I use Link in my SideMenuUnfoldLink component.
I suppose the Router is just not initialized by the moment SideMenuUnfoldLink wants to use Link. But how can I go about it?
I've just found the solution. It is to wrap the router around the entire
application to make it available to all components like this:
render() {
return(
<Router>
<div className="main_container">
<div className="col-md-3 left_col">
<div className="left_col scroll-view">
<div className="navbar nav_title" style={{border: 0}}>
<i className="fa fa-paw"></i> <span>Logo here</span>
</div>
<div className="clearfix"></div>
<SideMenuUserInfo />
<br />
<SideMenu />
<SideMenuFooter />
</div>
</div>
<TopNav />
<div id="content" className="right_col" role="main">
</div>
<footer>
<div className="pull-right">
Footer text here
</div>
<div className="clearfix"></div>
</footer>
</div>
</Router>
);
}
And of course removing this part:
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={About} />
<Route path='/post' component={Posting} />
<Route path='/groups' component={Groups} />
</div>
</Router>,
document.getElementById('content')
);
Here's a more detailed explanation https://reacttraining.com/react-router/
Lots of thanks to the author of that video :)