I am trying to split the routing based on area, like if I am in the user section
http://localhost:3000/user
then I want to handle all the routes like
http://localhost:3000/user/:id
http://localhost:3000/user/create
http://localhost:3000/user/:id/edit
http://localhost:3000/user/:id/delete
http://localhost:3000/user/filtered
in the user component itself. But it is not working.
If I am keeping
<Route path="/user" component={UserList} />
<Route path="/user/create" component={UserCreate} />
inside index.js file (main file, where other routes are also defined), it is working,
but if I am moving the routes related to User in UserList component as below:
import React from 'react';
import { Link, Route } from 'react-router-dom';
import UserCreate from './create';
class UserList extends React.Component {
render() {
return (
<div>
<h1>user List will be here</h1>
<Link to="/user/create">create User</Link>
<Route path="/user/create" component={UserCreate}/>
</div>
);
}
}
export default UserList;
and UserCreate
import React from 'react';
import { Link } from 'react-router-dom';
class UserCreate extends React.Component {
render() {
return (
<div>
<Link to="/user">Back</Link>
<h1>form design wil go here</h1>
</div>
);
}
}
export default UserCreate;
it is displaying the /user, but after redirecting to /user/create, it is not working
I have tried this and this, and some more similar, but they are not useful to me.
here is a working example, I have tried.
I am not sure, even this is possible or not.
You have written wrong path in to , it should be user instead of usre
render() {
return (
<div>
<h1>user List will be here</h1>
<Link to="/user/create">create User</Link>
<Route path="/user/create" component={UserCreate} />
</div>
);
}
You're using export default so
import UserList from './user/userList';
import UserCreate from './create';
instead of
import { UserList } from './user/userList';
import {UserCreate} from './create';
Related
What if the Home component includes a button, and I want that when it click on, it will go to another Route (domain). For example - choose component?
How can I do that ?
The main component:
function App() {
return (
<Router> {/*Everything inside this will be capble to routing*/}
<div className="App">
<h1>CarLeas</h1>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/choose" component={Choose}/>
<Route path="/whochoose" component={Whochoose}/>
<Route path="/reback" component={Reback}/>
</Switch>
</div>
</Router>
);
}
Home component:
import React from "react";
class Home extends React.Component {
render() {
return (
<div>
<img src="https://www.trustford.co.uk/img/campaigns/all-new-ford-focus/2018-08-22/all-new-focus-banner-2000x500.jpg"></img>
<p>Rent a Car</p>
<button>Start Now</button> {/*Button - If event onclick happend show the "choose" component*/}
</div>
)
}
}
export default Home;
You can use this.props.history.push() to switch routes programmatically, in your case:
this.props.history.push("/choose");
However, I would recommend you using <Link> from react-router for linking, if there is no other logic, like so:
import React from "react";
import {Link} from "react-router";
class Home extends React.Component {
render() {
return (
<div>
<img src="https://www.trustford.co.uk/img/campaigns/all-new-ford-focus/2018-08-22/all-new-focus-banner-2000x500.jpg"></img>
<p>Rent a Car</p>
<Link to="/choose">Start Now</Link>
</div>
)
}
}
export default Home;
import React from "react";
class Home extends React.Component {
render() {
const { history } = this.props;
return (
<div>
<img src="https://www.trustford.co.uk/img/campaigns/all-new-ford-focus/2018-08-22/all-new-focus-banner-2000x500.jpg"></img>
<p>Rent a Car</p>
<button onClick={()=> history.push('/choose') }>Start Now</button>}
</div>
)
}
}
export default Home;
I have this code I have been trying to get to work. Cannot figure out whats wrong with it! There are no errors and I have tried several ways of importing/exporting, and changing the functions to const.
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Home } from "./Home";
import { Contact } from "./Contact";
class App extends Component {
render() {
return (
<React.Fragment>
<Router>
<Switch>
<Route path="/" component={Home} />
<Route path="/contact">
<Contact />
</Route>
</Switch>
</Router>
</React.Fragment>
);
}
}
export default App;
Then I have two separate functions
import React from "react";
export function Home() {
return (
<div>
<h2>Whats up!</h2>
<p>This is sample text. </p>
</div>
);
}
import React from "react";
export function Contact() {
return (
<div>
<h2>Contact page!</h2>
<p>This is different text. </p>
</div>
);
}
export default Contact;
Based on your last comment - "The above code actually displays whatever is in the first Route no matter the url", the issue is that you're not providing the Route components with an exact prop of true.
Switch will render the first matching Route and skip all the other ones. Since / "matches" all routes, you're only seeing the Home component.
How to redirect from one class component to another class component/fresh page in ReactJS.
Currently, I am able to load new components through the link tags in react-router.
but then I want to redirect to another class component just like href in HTML to another fresh page where the previous states will not be available and it's a fresh new class.
Example:- I have 3 Pages
LandingPage
LoginPage
SignupPage
Initially, LandingPage will be opened and after that when I click the respective screen it will open.
How can i load a fresh LoginPage & SignupPage from LandingPage. Both SignupPage and LandingPage have a separate class component to manage the state of that particular screens.
Please share some code references.
Thanks in advance.. :)
If you want to open login or signup page from landing page you can simply call history.push('/login') from landing page component to open login page. history is available in every route so can be called directly.
index.js
import { BrowserRouter, Route,Switch} from 'react-router-dom';
import landingPage from './landingPage';
import login from './login';
import signup from './signup';
render(){
<BrowserRouter>
<Switch>
<Route exact={true} path="/" component={landingPage} />
<Route exact={true} path="/login" component={login} />
<Route exact={true} path="/signup" component={signup} />
</Switch>
</BrowserRouter>
}
//landing page component
landingPage =()=>{
const openLoginPage= () => {
history.push('/login'); //this will open login page on click of login button
}
return(<div>
< button onClick={openLoginPage}>login</button >
</div>)
}
Will it help to reach your idea? I just share you the idea of routing in react using react-router-dom
App.js
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import SignUp from "./signUp";
import Login from "./login";
import Landing from "./landing";
class App extends Component {
render() {
return (
<Router>
<div id="container">
<div>
<Link to="/">Landing</Link>
<Link to="/signup">Sign Up</Link>
<Link to="/login">Login</Link>
</div>
<Switch>
<Route exact path="/signup" component={SignUp} />
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Landing} />
</Switch>
</div>
</Router>
);
}
}
export default App;
You have supposedly created your functional component/ class component, you may import and use accordingly
Update for the class components
Once the routed from one component to another component each component will load with its own state and props
I have put here my class components, you have to make sure all App.js, landing.jsx, signUp.jsx and login.jsx are on the same folder location
landing.jsx
import React, { Component } from "react";
class Landing extends Component {
state={}
render() {
return (
<div>
<h1>Landing page</h1>
</div>
);
}
}
export default Landing;
signUp.jsx
import React, { Component } from "react";
class SignUp extends Component {
state={}
render() {
return (
<div>
<h1>Sign Up page</h1>
</div>
);
}
}
export default SignUp;
login.jsx
import React, { Component } from "react";
class Login extends Component {
state={}
render() {
return (
<div>
<h1>Login page</h1>
</div>
);
}
}
export default Login;
Another way is use push method on button click inside class components, and in both cases route should be there
<button onClick={()=> this.props.history.push('/')} ></button>
or
<button onClick={()=> this.props.history.push('/signup')} ></button>
I'm trying to build my first website with react, and I've had a lot of trouble with navigation. I'm using react-router and for some reason my tag is changing the url at the top of the page, but not rendering the proper component.
Here is my navbar.jsx:
import React, { Component } from "react";
import { Link, BrowserRouter } from "react-router-dom";
class Navbar extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to={"/test"}>Test</Link></li>
</ul>
</div>
</BrowserRouter>
)
}
}
export default Navbar;
Here is test.jsx:
import React, { Component } from "react";
class Test extends Component {
state = {};
render() {
return (
<div>
<h1>Test</h1>
</div>
);
}
}
export default Test;
Does anyone know why this is changing the url(as expected), but not rendering test.jsx?
You need to use Route to render component for different routes.
import React, { Component } from 'react';
import { Link, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Test from './import-path-of-test-component';
class Navbar extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li>
<Link to={'/test'}>Test</Link>
</li>
</ul>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default Navbar;
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.