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.
Related
This one is my output image for your better understanding what i am trying to ask
This is my file where the link is to be clicked in this i am just trying on link to be clicked. When i click link you can see the output comes at down part of the same page instead of on the other page
<BrowserRouter>
<div className="footer-col">
<h4 className="h"> About Order</h4>
<ul className="u1">
<li>
<Link to={{ pathname: "/aboutus" }}>About us</Link>
</li>
<li><a>Track My Orders</a></li>
<li><a>Checkout</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<Routes>
<Route path="/aboutus" element={<Aboutus />}></Route>
</Routes>
</BrowserRouter>
This one is my About us file.
import React, { Component } from "react";
import Combinecases from "../Cases/combinecases";
import './Aboutus.css'
class Aboutus extends Component{
render() {
return (
<div>
<h1 className="h12">HIIIIIII</h1>
</div>
);
}
}
export default Aboutus;
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import New from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import Name from './components/pages/Name';
import { BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const App = () => {
return(
<>
<Router>
<New/>
<Switch>
<Route Path='/' exact component = {Home} />
<Route Path='/About' exact component = {About} />
<Route Path='/Services' exact component = {Services}/>
<Route Path='/Name' exact component = {Name}/>
<Route Path='/Home' exact component = {Home}/>
</Switch>
</Router>
</>
)
}
export default App;
Conatct.jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from 'react-dom';
function Contact () {
return (
<>
<h1>contact</h1>
</>
)
}
export default Contact;
Pages / Name.js (i have import Contact here)
import React from 'react';
import Contact from '../Contact'
export default function Name() {
return (
<>
<Contact />
</>
);
}
Navbar.js
import React from 'react';
import './Navbar.css'
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import { Button,Container,Navbar,Nav,NavDropdown,NavLink } from 'react-bootstrap';
import {
BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const New = () => {
return (
<div>
<div className="container-fluid">
<div className="row">
<div className='col-10 mx-auto'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<NavLink className="navbar-brand" to="/">Navbar</NavLink>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ms-auto mb-auto mb-lg-2">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Services">Services</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/About">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Contact">Contact</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
};
export default New;
First thing, using lowercase only in routes because browser concerto to lowercase
Second thing you need create a link component for react-router, NavLink is only UI element, not a valid like for rect router
should using this
https://reactrouter.com/web/api/Link
I'm getting started with react and at the moment I'm struggling to adjust the styling of my navigation through different pages of my app. Despite the thorough research I made on this, I struggled to find a concise and simple explanation on how to make this possible.
App.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import '../src/styles/main.css';
import Navigation from './components/layout/Navigation';
import Footer from './components/layout/Footer';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';
function App() {
return (
<Router>
<div className="App">
<Navigation />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Footer />
</div>
</Router>
);
}
export default App;
Navigation.js
import React from 'react';
import {Link} from 'react-router-dom';
import logo from '../../images/logo.png'
function Navigation () {
return (
<header>
<Link to="/"><img className="logo" src={logo} alt=""/> </Link>
<nav className="menu">
{/* <img src="./images/menu.svg" alt="Menu bar" className="hero__menu-icon"/> */}
<ul className="menu__items">
<li className="menu__item"> Portfolio </li>
<li className="menu__item"> <Link to="/about"> About </Link> </li>
<li className="menu__item"> <Link to="/contact"> Contact</Link></li>
</ul>
</nav>
</header>
)
}
export default Navigation;
I've been battling with this for a while now and didn't get any success due to my limited knowledge in React. Any help would be greatly appreciated.
I am trying to use Link instead of anchor tag. In this Link tag i am using the to property but it gives me error, such as, "You must specify 'to' property".
code of Nav.jsx
import React from "react";
import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
<div className="container">
<Link className="brand-logo">Sherlock Holmes</Link>
<ul className="right">
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Code of App.jsx
import React, { Component } from "react";
import NavBar from "./components/Nav";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
class App2 extends Component {
state = {};
render() {
return (
<BrowserRouter>
<div className="App">
<NavBar />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>
);
}
}
export default App2;
It gives me error on App.jsx page at ReactDom.render that you must specify 'to' property.
Problem
<Link className="brand-logo">Sherlock Holmes</Link>
doesn't have a to attribute
Solution
<Link to="/some_link" className="brand-logo">Sherlock Holmes</Link>
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.