I use react-router with webpack, when I click on the link it works but when I refresh the page, I get this message 'Cannot GET /sas'
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import { HashLink } from 'react-router-hash-link'
import Homepage from '../homepage/homepage'
import Sas from '../sas/sas'
const Routes = () => {
return (
<Router>
<div>
<nav className="navbar fixed-top navbar-expand-sm navbar-light bg-white py-3">
<NavLink className="navbar-brand right-border-menu px-5" exact to="/">Statuts Juridiques</NavLink>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<NavLink className="nav-item nav-link" exact to="/sas">Je crée mon entreprise</NavLink>
</div>
</div>
</nav>
<Route path='/' exact strict component={Homepage} />
<Route path='/sas' exact strict component={Sas} />
</div>
</Router>
)
}
export default Routes
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
import React, { Component } from 'react'
class Sas extends Component {
render() {
return(
<div className="column justify-content-center align-item-center my-5 py-5">
Sas page
</div>
)
}
}
export default Sas
Related
I am using react framework to call a function from one component(languagefunction.js) to other component app.js
languagefunction.js
import React, { Component } from "react";
const languagefunction= () => <h1>hello Sir</h1>
export default languagefunction
App.js
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import {Dropdown,DropdownButton}from 'react-bootstrap';
import Login from "./components/login.component";
import SignUp from "./components/signup.component";
import languagefunction from "./components/languagefunction";
function App() {
return (<Router>
<div className="App">
<languagefunction/>
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link className="navbar-brand" to={"/sign-in"}>Tira Desk</Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={"/sign-in"}>Sign in</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={"/sign-up"}>Sign up</Link>
</li>
<li>
<DropdownButton id="dropdown-basic-button" title="Dropdown button">
<Dropdown.Item eventKey="english_language">English</Dropdown.Item>
<Dropdown.Item eventKey="tamil_language">Tamil</Dropdown.Item>
</DropdownButton>
</li>
</ul>
</div>
</div>
</nav>
<div className="outer">
<p>Testing</p>
<div className="inner">
<Switch>
<Route exact path='/' component={Login} />
<Route path="/sign-in" component={Login} />
<Route path="/sign-up" component={SignUp} />
</Switch>
</div>
</div>
</div></Router>
);
}
export default App;
The issue i am facing is "'languagefunction' is declared but its value is never read."
I have declared the value "import languagefunction from "./components/languagefunction" and used it in <languagefunction/>
I hope i have done it right, care to explain what is the mistake i am making.
In React components need to start with a capital letter, try this instead:
Languagefunction.js
const Languagefunction= () => <h1>hello Sir</h1>
export default Languagefunction
App.js
...
import Languagefunction from "./components/Languagefunction";
function App() {
return (<Router>
<div className="App">
<Languagefunction/>
...
I have a top App component and child LoginForm component. App component send this.history to loginform props and loginForm call history.pust('/') on successful login
But if I need to call this.history in App constructor or in comonentDidMount it is undefined. I dont understand ho is it possible. Can somebody help me please to understand it?
import React from "react"
import {
Switch,
Route,
NavLink
} from "react-router-dom"
import Home from "./components/Home"
import Topics from "./components/Topics"
import Login from "./components/Login"
import About from "./components/About"
import 'bootstrap/dist/css/bootstrap.css'
import './assets/App.scss';
import { withRouter } from "react-router-dom"
import axios from 'axios'
window.$ = require('jquery')
require('popper.js')
require('bootstrap')
class App extends React.Component
{
constructor(props)
{
super(props)
this.state = {
userName: '',
accessToken: this.getAccessToken()
}
if( ! this.state.accessToken ) this.history.push('/login') // Error call push of undefined
}
componentDidMount()
{
console.log(this.history) // undefined <<<<<<<<<<<<<<<
}
render()
{
return (
<div>
<nav className="navbar navbar-dark bg-dark">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<NavLink to="/" className="nav-link">Home</NavLink>
</li>
<li className="nav-item">
<NavLink to="/login" className="nav-link">Login</NavLink>
</li>
</ul>
</div>
</nav>
<div className="container-fluid content">
<div>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/login">
<Login history={this.history} /> // This is ok <<<<<<<<<<<<<<
</Route>
</Switch>
</div>
</div>
</div>
);
}
}
export default App
I am working on react project In this have two components Home and Contact in Home I have button If I click that button I have to go Contact component. But in my Navbar I have only Home component so in output also I have only home page. So If I click the button I need to see Contact Component.
This is Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';
export default function Navbarcollection() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className='nav-link' to='/'>Home</Link>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
)
}
This is App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";
import Navbar from './Navbar/Navbarcollection';
import Home from './Home/Home';
import Contact from './Contact/Contact';
function App() {
return (
<div className="App">
<Router>
<Navbar></Navbar>
<Switch>
<Route exact path='/'><Home></Home></Route>
<Route path='/contact'><Contact></Contact></Route>
</Switch>
</Router>
</div>
);
}
export default App;
This is Home.js
import React from 'react'
export default function Home() {
return (
<div className='container pt-5 text-center'>
<button className='btn btn-primary'>Click here</button>
</div>
)
}
This is Contact.js
import React from 'react'
export default function Contact() {
return (
<div className='pt-5 text-center'>
<h1>My name is Mark you can call me xxxxxxxxx!</h1>
</div>
)
}
You are not giving the target path in the button that's why it is not redirecting you anywhere.
Try by replacing your home component with below one.
import React from 'react';
import { Link } from 'react-router-dom';
export default function Home() {
return (
<div className='container pt-5 text-center'>
<Link to='/contact' className='btn btn-primary' >Click here</Link>
</div>
)
}
Hope this will help you.
in your button in your Home.js replace
<button className='btn btn-primary'>Click here</button>
with
Click here
this is the simplest solution based on the fact you are using bootstrap and routing /contact path to your contact component
Have a look at Conditionnal rendering
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
{ if (this.props.location.pathname !== "/") {
return <Link className='nav-link' to='/'>Home</Link>
} else {
return <Link className='nav-link' to='/contact'>Contact</Link>
}
}
</li>
</ul>
</div>
Moreover you should probably be using an other syntax to register your routes :
<Switch>
<Route exact path='/' component="{Home}"/>
<Route path='/contact' component="{Contact}"/>
</Switch>
I am working on react project, In that I have Home component. By hovering Home Component I get Home Static Image Component. How to achieve this in react.
For Example: Example, If I am looking for a birthday cake. I went to one cake website, on that website, If I hover on cake page then I am able to see the variety of cakes they offer under the cake page.
How to do routing for this cake Example
This is Navbar.js
import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';
function Navbar() {
return (
<div className='container-fluid'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div classNameName='logo'>
<img src='assets/images/logo.png' alt='logo'></img>
</div>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className='nav-link dropdown-toggle' to='/'>HOME</Link>
<div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<Link className='nav-link' to='/'>Home Static Image</Link>
</div>
</li>
<li className="nav-item">
<a className="nav-link" href="www.facebook.com">Features</a>
</li>
<li className="nav-item">
<a className="nav-link" href="www.facebook.com">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
)
}
export default Navbar
In Home folder I have two components one is Home.js and the other one is Staticimage.js
This is Home.js
import React from 'react';
import './Home.css';
function Home() {
return(
<div className='container'>
<div className='row'>
<h1>Home works</h1>
</div>
</div>
)
}
export default Home
This is Staticimage.js
import React from 'react';
import './Home.css';
function Static() {
return(
<div className='container'>
<div className='row'>
</div>
</div>
)
}
export default Static
This is App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './Components/Navbar/Navbar';
import Home from './Pages/Home/Home';
import Static from './Pages/Home/Staticimage';
function App() {
return (
<div className="App">
<Router>
<Navbar></Navbar>
<Switch>
<Route exact path='/'><Home></Home></Route>
<Route exact path='/'><Static></Static></Route>
</Switch>
</Router>
</div>
);
}
export default App;
If I am not clear with my doubt please put a comment.
I'm using react-router v4 for routing in React. The issues i'm facing is that the react-router changes the location but is unable to render the component. I heard that using redux with react blocks updates but i'm not using redux here .
Sidebar.js
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Link
} from 'react-router-dom';
import $ from 'jquery';
import {withRouter} from 'react-router-dom';
class Sidebar extends Component {
render () {
return (
<Router>
<div>
<button className="navbar-toggler" data-toggle="collapse" data-target="#pill">
<span><i className="fa fa-ellipsis-v"></i> menu</span>
</button>
<div id="pill">
<ul className="nav nav-pills flex-column sidebar">
<li className="nav-item">
<Link to="/" className="nav-link">
<i className="fa fa-dashboard"></i> Dashboard
</Link>
</li>
<li className="nav-item">
<a href="#students" className="nav-link" data-toggle="collapse">
<i className="fa fa-users"></i> Students
</a>
<ul className="collapse" id="students" style={{marginLeft: '-25px'}}>
<li className="nav-item"><Link to="/students" className="nav-link"><i className="fa fa-eye"></i> View students</Link></li>
</ul>
</li>
</ul>
</div>
</div>
</Router>
)
}
}
export default withRouter(Sidebar);
App.js
import React, { Component } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Dashboard from './Dashboard';
import Students from './Students';
class App extends Component {
render() {
const { match } = this.props;
return (
<Router>
<div>
<Navbar />
<div className="container-fluid main">
<div className="row">
<div className="col-sm-2 area-left">
<Sidebar />
</div>
<div className="col-sm-10 area-right float-right">
<div>
<Route exact path="/" component={Dashboard} />
<Route exact path="/students" component={Students} />
</div>
</div>
</div>
</div>
</div>
</Router>
);
}
}
export default App;
When route is /
When route is /students
Reloading the page renders the component
The Link you specified in your sidebar is trying to use the Router you wrapped the component in, not the Router you defined your links in.
This is what your sidebar component should look like.
import React, {Component} from 'react';
import {
Link,
withRouter
} from 'react-router-dom';
import $ from 'jquery';
class Sidebar extends Component {
render () {
return (
<div>
<div>
<button className="navbar-toggler" data-toggle="collapse" data-target="#pill">
<span><i className="fa fa-ellipsis-v"></i> menu</span>
</button>
<div id="pill">
<ul className="nav nav-pills flex-column sidebar">
<li className="nav-item">
<Link to="/" className="nav-link">
<i className="fa fa-dashboard"></i> Dashboard
</Link>
</li>
<li className="nav-item">
<a href="#students" className="nav-link" data-toggle="collapse">
<i className="fa fa-users"></i> Students
</a>
<ul className="collapse" id="students" style={{marginLeft: '-25px'}}>
<li className="nav-item"><Link to="/students" className="nav-link"><i className="fa fa-eye"></i> View students</Link></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
)
}
}
export default withRouter(Sidebar);
More explanation:
You should only wrap your top level component in the router since it for lack of better terms spawns all the children in your app. Furthermore, it will automatically inject the props for the router unless you are using redux. So unless you're using redux no need for withRouter() *.
*lmk if i'm wrong, i'm not an expert.
Example of your top level app component:
render() {
return(
<Router history={History}>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/student" component={Student} />
</Switch>
</Router>
)
}
Essentially wrap your Route with Switch.
Update App.js to the below
import React, { Component } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Dashboard from './Dashboard';
import Students from './Students';
class App extends Component {
render() {
const { match } = this.props;
return (
<Router>
<div>
<Navbar />
<div className="container-fluid main">
<div className="row">
<div className="col-sm-2 area-left">
<Sidebar />
</div>
<div className="col-sm-10 area-right float-right">
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/students" component={Students} />
</Switch>
</div>
</div>
</div>
</div>
</Router>
);
}
}
export default App;