Using react-router-dom, components are not displaying inside my embedded router.
Made sure all of the spellings were correct, the components load fine without the router.
import React, { Component } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import Constants from '../helpers/Constants'
import Header from "./Header";
import SideBar from "./SideBar";
import Candidate from "./Candidate";
import Settings from "./Settings";
export default class Base extends Component {
render() {
return (
<div>
<Header/>
<SideBar/>
<div id="app-body">
<Switch>
<Route component={Candidate} exact path="/#candidates"/>
<Route component={Settings} exact path="/#settings"/>
</Switch>
</div>
</div>
)}
}
nothing is visible
Related
import React, { Component } from 'react'
import WebFooter from './WebFooter'
import Navbar from './Navbar'
import FrontImage from './FrontImage'
import './App.css'
import OurServices from './OurServices'
import ContactUs from './ContactUs'
import OurTeam from './OurTeam'
export default class App extends Component {
render() {
return (
<div class='bgimg'>
<Navbar/>
<FrontImage/>
<OurServices/>
<OurTeam />
<ContactUs/>
<WebFooter/>
</div>
)
}
}
This is my app.js file.
In navbar component I have login,register and home button.
When I clicked on Login,I the page should navigate to another page which contains navbar and login form
but does not contain other components like our team,contact us
You should use BrowserRouter, Route from react-router-dom.
Finally you App.js will be something like this
return (
<BrowserRouter>
<Navbar />
<Route exact path="/login" component={Login} />
<Route exact path="/services" component={OurServices} />
<WebFooter/>
>
</BrowserRouter>
)
Then in Navbar you should add links to Login in Navbar. An esiest way is to use useHistory hook from react-router-dom. Then push like history.push('/login')
Ask me, if you will have question
I have the following index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';
ReactDOM.render(
<BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));
the following in main.js:
import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';
class Main extends Component {
render() {
return (
<div id="main-layout">
<div id="main-header">
<div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
<div><h2>Lil Test By Me</h2></div>
</div>
<div id="main-content">
<NavMenu />
<Content />
</div>
<div id="main-footer">
<div>Copyright © 2020. Powered By me. All Rights Reserved.</div>
</div>
</div>
);
}
}
export default Main;
And The following in content.js
import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
It it my attempt to create an SPA with the Content component as my target for all my subsequent pages; however, I am clearly doing something wrong as I am getting all kinds of errors all over the place. Can anyone immediately see what I am doing incorrectly here?
Route and Switch needs to be imported from react-router-dom instead of react-dom
import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
Use react-router-dom instead of react-router and then
change your content.js code to this.
import React, { Component } from 'react';
import {Route, Switch, BrowserRouter as Router} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Router>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route path="/invoicing" component={Invoicing} />
</Switch>
</Router>
)
}
};
export default Content
notice that I have added Router above the switch. and changed react-router to react-router-dom and also transformed the routes to lowercase
I have made 3 components
1)Navbar
2)Content
3)Pagination
On home page I want to display all 3 components.
I have made another component Matchinfo which should get displayed when we click on view stats button (see screenshot for more clarification) .
In app.js how should I make use of Routes so that 3 components will get display on home page i.e localhost:3000/ and when I click on view stats button it should render component Matchinfo.
In app.js :
import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import './App.css';
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';
import Matchinfo from './components/matchinfo';
class App extends Component {
render() {
return (
<div className="App">
<div className="content">
<Route path="/" component={Navbar, Content, Pagination}/>
<Route path="/match" component={Matchinfo}/>
</div>
</div>
);
}
}
export default App;
You no need to call these components in app.js using routes. I would request you to create sepearte component like Home(see example below home.js).
Then, In app.js call Home component
import Home from './components/home';
<Route path="/" component={Home}/>
create home.js under components
Call Navbar, Content annd Pagination components in Home component
import React, {Component} from "react";
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentWillMount() {
}
render() {
return (
<div>
<Navbar/>
<Content />
<Pagination/>
</div>
)
}
}
export default Home;
Since you want to display Navbar, Content annd Pagination components in home page so do it like above way. Here Home is your parent component and Navbar, Content annd Pagination are child components to Home.
One route is enough mostly for one web page and in React most of times you will play with child components. You no need to configure all the components with routes.
There are several ways achieving the result.
The first one is using render method for home Route. Also, use exact attribute of Route to ensure the location is matched exactly.
import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import './App.css';
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';
import Matchinfo from './components/matchinfo';
class App extends Component {
render() {
return (
<div className="App">
<div className="content">
<Route path="/" render={(props) => (
<React.Fragment>
<Navbar/>
<Content />
<Pagination/>
<React.Fragment/>
)} exact/>
<Route path="/match" component={Matchinfo} exact/>
</div>
</div>
);
}
}
export default App;
The second one, create auxiliary component Home, for example, and include it in your route, like this:
<Route path="/" component={Home} exact/>
Hello! What I'm trying to do is rework my react-router so the NavLink renders a completely new page on click, instead of rendering at the bottom of the div, as shown in the gif above.
Here's the content of my main App.js component:
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home.js';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
class App extends Component {
render() {
return (
<Router>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about/' component={About} />
<Route path='/september/' component={September} />
<Route exact path='/september/trilogy/' component={Trilogy} />
</Switch>
</div>
</Router>
);
}
}
export default App;
The Home component's code, which holds the NavBar that's used in the Home Page.
import React, { Component } from 'react';
import { BrowserRouter as Router, NavLink, Switch, Route } from 'react-router-dom';
import logo from './logo.png';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
let NavBar = () => {
return (
<div>
<h2 className="container2"><NavLink to='/about/'>About</NavLink> </h2>
<img src={logo} className="somersetLogo" alt="somersetLogo" />
<h2 className="container" >Contact</h2>
</div>
)
}
class Home extends Component {
render() {
return (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path='/about/' component={About} />
</Switch>
</div>
</Router>
)
}
}
export default Home;
Any idea what went wrong? Any help would be appreciated! Thanks!
If you are using react router v4 or above it should be something like this.
import { Link } from 'react-router-dom';
<Link to='/about'>
About
</Link>
Why you are defining router again in Home component which is not needed. Keeping route configuration in App component would be enough. Hope this helps. Happy coding !
I think i got a problem using a very basic react router implementation.
When i load my "localhost:8080/dist/", it WORKS, load the header component that is being imported on App, and load the IndexRoute properly, but when i try to access "localhost:8080/dist/FPDV0200" or "localhost:8080/dist/FPDV0400" it dosnt work. Any clues?
app.component.tsx
import * as React from 'react';
import Header from '../header/header.component';
class App extends React.Component<any, any> {
render() {
return (
<div id="app">
<Header />
<div>
{this.props.children}
</div>
</div>
);
}
}
export default App;
app.component.tsx
import * as React from 'react';
import { Router, hashHistory, Route, IndexRoute } from 'react-router';
import App from '../components/structure/app/app.component';
import Home from '../pages/home/home';
import FPDV0200 from '../pages/FPDV0200/FPDV0200';
import FPDV0400 from '../pages/FPDV0400/FPDV0400';
const routes = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="FPDV0200" component={FPDV0200}/>
<Route path="FPDV0400" component={FPDV0400}/>
</Route>
</Router>
);
export default routes;
localhost:8080/dist/FPDV0200 - this url should work in case of usage browserHistory.
You use hashHistory, so your url should look like this
localhost:8080/dist#FPDV0200