I am rookie to ReactJS and recently start learning. I've created 2 components home and ContactList using TSX. I am using React-Router to change route.
App.JS
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';
class App extends Component {
render() {
return (
<div>
<Header title="This is Header">
</Header>
<Menulink></Menulink>
<Router>
<switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={ContactList} />
</switch>
</Router>
<Footer></Footer>
</div>
)
}
}
export default App;
Menulink.tsx:
import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";
export class Menulink extends React.Component {
render() {
return (
<Router>
<switch>
<Link to="/">Home </Link> |
<Link to="/contact">Contact List</Link>
</switch>
</Router>
)
}
}
Issue is, when I click on link, URL change, but component is not
getting replace. is it because I've written links and route both in
different files?
First, you need to have one Router instance
Second, MenuLink needs to be rendered as a Child of Router
Third, import Switch from react-router-dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';
class App extends Component {
render() {
return (
<div>
<Header title="This is Header">
</Header>
<Router>
<Route component={Menulink} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={ContactList} />
</Switch>
</Router>
<Footer></Footer>
</div>
)
}
}
export default App;
import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";
export class Menulink extends React.Component {
render() {
return (
<React.Fragment>
<Link to="/">Home </Link> |
<Link to="/contact">Contact List</Link>
</React.Fragment>
)
}
}
This is because you have two different Router instances. You need only One router instance at the Top of the component heirarchy. Or at the very least..the heirarchy that you expect to be changing with URLs.
So if you put your <MenuLink /> under the <Router> that is defining the routes, your routing will work fine.
Related
I'm new to React. I'm trying to learn react-router. What I'm trying to do is have two components link to each other like so:
Here is the App.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
The About.js
import React from 'react';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' render={() =>
<div>
<Link to={'/home'}>Hello</Link>
</div>}/>
<Route path='/home' component={Home}/>
</Switch>
</Router>
);
}
}
export default About;
and the Home.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class Home extends React.Component {
ender () {
return (
<Router>
<Switch>
<Route path='/home' render={() =>
<div>
<Link to={'/'}>Hi</Link>
</div>}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default Home;
When I start the app, the About component gets rendered. However, when I click the link, the URL changes but the Home components does not get rendered. What am I doing wrong?
It's best practice to have your routing logic at one place, in this case in App.js.
import React from 'react';
import About from './About';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/home' component={Home}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
and then in Home.js
import React from 'react';
import {Link} from 'react-router-dom';
class Home extends React.Component {
render () {
return (
<div>
<h1>This is home component</h1>
<Link to={'/'}>Go to About Component</Link>
</div>
);
}
}
export default Home;
and in About.js
import React from 'react';
import {Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<div>
<h1>This is About component</h1>
<Link to={'/home'}>Go to Home Component</Link>
</div>
);
}
}
export default About;
I want to create a simple react router example and have added my code below. The components gets displayed on refresh but the links doesn't seem to work. I have kept my links in 'Header.js' file and the components inside a folder called 'functional'. Can someone help me with this, am new to this and appreciate all the help.
routes.js
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
import Container1 from './container/container1';
import Header from './container/header';
import history from './utils/history';
import { Router, Route, Switch } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path = "/" component={Container1} />
<Route path="/component1" render={() => <Component1/>} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Switch>
</div>
</Router>
</div>
);
}
}
export default Routes;
header.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Header extends Component {
render () {
return (
<div>
<Link to='/' style={{padding: '5px'}}>
Home
</Link>
<Link to='/component1' style={{padding: '5px'}}>
component1
</Link>
<Link to='/component2' style={{padding: '5px'}}>
component2
</Link>
<Link to='/component3'style={{padding: '5px'}}>
component3
</Link>
</div>
);
}
}
export default Header;
App.js
import React from 'react';
import './App.css';
import Routes from './routes';
function App() {
return (
<div>
<Routes />
</div>
);
}
export default App;
In your routes.js, try to change following:
From:
import { Router, Route, Switch } from 'react-router';
To:
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
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'm using react-router to direct a set of cards on the main page, to other individual pages. However, when I click on a card, the new page renders underneath the set of cards, when what I want is to render ONLY the new page. I think the problem may have to do with that my App.js holds the main page inside it, but I don't know where I should put it, if there should be a separate link to it, etc? I would appreciate any help! Thank you
here is the code for the App.js
import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_cards.js';
export default class App extends React.Component {
render() {
return(
<div>
<ProjectCards />
<Routes />
</div>
);
}
}
here is the main container:
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';
class ProjectCards extends React.Component {
render() {
var projectCards = this.props.projects.map((project, i) => {
return (
<div key={i}>
<Link to={`/${project.title}`}>
<ProjectCard title={project.title} date={project.date} focus={project.focus}/>
</Link>
</div>
);
});
return (
<div>{projectCards}</div>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default connect(mapStateToProps)(ProjectCards);
here is the routes container:
import React from 'react';
import Project1 from '../components/project1.js';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router';
class Routes extends React.Component{
render() {
var createRoutes = this.props.projects.map((project, i) => {
return <Route key={i} exact path={`/${project.title}`} exact component={Project1}/>
});
return (
<Switch>
{createRoutes}
</Switch>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default withRouter(connect(mapStateToProps)(Routes));
Set you App file as entry for all components e.g
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from '../../ui/components/user/home/Home.jsx';
import Header from './header/Header.jsx';
import Fakebook from '../../ui/components/user/fakebook/Fakebook.jsx';
import Dashboard from '../../ui/components/user/dashboard/Dashboard.jsx';
import NotFound from '../../ui/pages/NotFound.jsx';
export default class App extends Component{
render(){
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path="/" component={Fakebook}/>
<Route exact path="/Home" component={Home}/>
<Route exact path="/Dashboard" component={Dashboard} />
<Route exact path="/Dashboard/:userId" component={Dashboard}/>
<Route component={NotFound}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
Now if you studied it you will notice a <Header /> component which is not in a route. I did it that way because my header is constant across my whole app.
This is how I setup my route I make my Route the second file after the index.js file so all my route can be visible.
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 !