So coming from an Angular/AngularJS background, you have states, and each state is a separate page. E.g. in a social network you can have a state with your feed, a state with a list of your friends, or a state to see a profile etc. Pretty straightforward. Not so much in React for me.
So let's say I have an application with 2 pages: a list of products and a single product view. What would be the best way to switch between them?
The simplest solution is to have an object which has a stateName and is a boolean
constructor() {
super();
this.state = {
productList: true,
productView: false
}
}
And then have something like that in your render() function
return() {
<div className="App">
// Or you could use an if statement
{ this.state.productList && <ProductList /> }
{ this.state.productView && <ProductView product={this.state.product} /> }
</div>
}
Pretty straightforward, right? Sure, for a 2 page application that is.
But what if you have a large app with 10, 20, 100 pages? The return() part of the render would be a mess, and it would be madness to track the status of every state.
I believe there should be a better way to organize your app. I tried googling around but I couldn't find anything useful (except for using if else or conditional operators).
I'd recommend you to check react-router to solve this situation
It easily allows you to create custom routes like this:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
export default BasicExample;
For the documentation and other examples, like nested Routing, checkout this page.
This example uses React Router v6.
file App.js
import React from "react";
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";
import Products from "./pages"
import Product from "./pages/product"
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Products />} />
<Route path="product" element={<Product />} />
</Routes>
</Router>
);
}
export default App;
file pages/index.js
import React from "react";
import {Link} from "react-router-dom";
const Products = () => {
return (
<div>
<h3>Products</h3>
<Link to="/product" >Go to product</Link>
</div>
);
};
export default Products;
file pages/product.js
import React from "react";
const Product = () => {
return (
<div>
<h3>Product !!!!!!</h3>
</div>
);
}
export default Product;
The problem you have mentioned can be adressed as how to deal with routing within app. For that please take a look at available solutions such as react-router.
Another way you can tackle this problem is by moving out rendering different pages logic to component with would then render page based on data passed as props. For that you can use plain, old JavaScript object.
Related
Below is a sample code that renders two buttons (home and about) and two page component (also Home and About). Upon clicking each button, the buttons would call history.push to go to the respective page and should render the component.
However, what I notice is that when a button is clicked, the url changes but the component doesn't show up. I manage to get this fixed by passing the { forceRefresh: true } property when creating browser history like this const history = createBrowserHistory({ forceRefresh: true }); Still, I don't quite understand why this occur and why forceRefresh solves the problem and would appreciate any explanation.
That reason I didn't use the <Link> component to wrap around the button is because I want to call a function to execute something before redirecting when the button is clicked. If there is another way to do this, I would love to know from the community. Thanks.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const MyApp = () => {
const history = createBrowserHistory();
return (
<Router history={history}>
<div>
<ul>
<li>
<button onClick={() => history.push('/')}>Home</button>
</li>
<li>
<button onClick={() => history.push('/about')}>About</button>
</li>
</ul>
<Switch>
<Route exact path='/'>
<Home />
</Route>
<Route exact path='/about'>
<About />
</Route>
</Switch>
</div>
</Router>
);
};
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
ReactDOM.render(<MyApp />, document.getElementById('root'));
This is because of this line:
const history = createBrowserHistory();
You are instantiating a history object which will be used by Router to keep track of the routing history. This is something used under the hood by Router and you shouldn't need to worry about it.
What you're doing wrong is to think that the history variable you declared there (use by Router) is the same used to navigate through the app. It's not.
You should use this history to navigate:
import { useHistory } from 'react-router-dom'
Usage:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { useHistory } from 'react-router-dom';
const MyApp = () => {
const historyInstance = createBrowserHistory();
const history = useHistory();
return (
<Router history={historyInstance}>
<div>
<ul>
<li>
<button onClick={() => history.push('/')}>Home</button>
</li>
<li>
<button onClick={() => history.push('/about')}>About</button>
</li>
</ul>
<Switch>
<Route exact path='/'>
<Home />
</Route>
<Route exact path='/about'>
<About />
</Route>
</Switch>
</div>
</Router>
);
};
And with that, everything should work
import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import { connect } from "react-redux";
class Project extends Component {
render() {
return (
<div
className={
"ih-item square effect6 from_top_and_bottom grid-item " +
this.props.category +
" " +
this.props.widthClass
}
>
<FormattedMessage id="route.project">
{route => {
return (
<a href={"/" + route + this.props.url}>
<div className="img">
<img src={this.props.mainImage} alt="img" />
</div>
<div className="info">
<h3>{this.props.header}</h3>
<p>{this.props.description}</p>
</div>
</a>
);
}}
</FormattedMessage>
</div>
);
}
}
const mapStateToProps = state => {
return {
projects: state.project.projects
};
};
export default connect(
mapStateToProps,
{}
)(Project);
How to implement projects' pages and custom URL for every one. I suppose custom URLs have to be done with MongoDB, but how to implement it in reactjs. That is third day of my research, but mostly I found complicated code
Thanks for every answer
You would most likely use a client-side navigation package such as React-Router to accomplish this.
In order to set up a basic router, you need to define routes and views for those routes in the following fashion, where the "path" prop refers to your desired endpoint and "component" being the desired view:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
{/* Navigation menu */}
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
{/* Routes */}
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
These routes can also be dynamically-generated using an array of routes, such as the following (defined in your component state):
routes = [
{
path: "/",
exact: true,
component: Home
},
{
path: "/bubblegum",
component: () => <div>bubblegum!</div>,
},
{
path: "/shoelaces",
component: Shoelaces
}
and then rendered in React using .map():
{this.state.routes.map(route => (
<Route exact={route.exact||false} path={route.path} component={route.component} />
))}
I think you need to install react-router-dom.
Second, please use template strings.
I am a total React newbie and have a (probably) stupid question. How do I switch between DIFFERENT javascript pages in React.js?
I have a button on one of my pages, that I want to link to another javascript page. I know about the router, but that does not fit my needs.
Thank You,
Mark Bruckert
This is based on the example from the react-router docs. React Router is probably the easiest client side routing solution. Happy coding.
See the complete example on Stackblitz.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Nav = () => (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</div>
);
const HomePage = () => <h1>Home Page</h1>;
const AboutPage = () => <h1>About Page</h1>;
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<Router>
{/* Router component can have only 1 child. We'll use a simple
div element for this example. */}
<div>
<Nav />
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
</div>
</Router>
);
}
}
render(<App />, document.getElementById('root'));
Use react-router to define your pages and switch between them
https://reacttraining.com/react-router/
I've tried everything but fail to render component when URL changes. No error messages nothing, react-redux is installed but not using it yet, so it can't be the problem. When I check it from to Google chrome React dev tools, nothing happens, there is no match, history vs anything. I couldn't find a solution, is there any way to make it work?
https://codesandbox.io/s/vm3x9n4k67
Here is my NavBar.js. I import NavLink from react-router-dom and implement these
import React from 'react'
import classes from "./NavBar.css";
import { NavLink } from 'react-router-dom';
const NavBar = (props) => {
return (
<div className={classes.NavBar}>
<h1 className={classes.NavBar_list} >foodbase</h1>
<ul className={classes.NavBar_list}>
<NavLink to="/auth"> <li className={classes.NavBar_list_item}>Signin</li></NavLink>
<NavLink to="/"><li className={classes.NavBar_list_item}>Main Page</li></NavLink>
</ul>
</div>
)
}
export default NavBar
this is my Layout.js render property:
render() {
let recipes = [];
if (this.state.recipes.length > 0) {
recipes = this.state.recipes;
}
return (
<div>
<NavBar/>
<SearchBox
onChangeHandler={this.onChangeHandler}
value={this.state.inputValue}
onSearchClick={this.onClickedHandler} />
<section className={classes.SearchSection}>
<ul className={classes.SearchResultArea}>
<SearchResults
Results={recipes}
></SearchResults>
</ul>
</section>
</div>
)
}
and finally app.js:
import React, { Component } from 'react';
import { Switch, Route, BrowserRouter, withRouter } from 'react-router-dom';
import Auth from './components/Auth/Auth';
import SearchBox from './components/SearchBox/SearchBox';
import Layout from './containers/Layout/Layout';
import './App.css';
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Layout>
<Route path="/auth" component={Auth} />
<Route path="/" exact component={SearchBox} />
</Layout>
</Switch>
</BrowserRouter>
</div>
);
}
}
export default withRouter(App);
I assume that you need to put your Route components directly into Switch and don't forget to render children in Layout. So try this:
app.js:
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<Layout>
<Switch>
<Route path="/auth" component={Auth} />
<Route path="/" exact component={SearchBox} />
</Switch>
</Layout>
</BrowserRouter>
</div>
);
}
}
Layout.js
render() {
// ...
return (
<div>
<NavBar />
{ this.props.children } // <-- your route specific components
</div>
)
}
I have the following App component.
class App extends React.Component {
constructor() {
super();
this.state = {}
}
// various methods that interact with state defined here
render() {
const Main = () => (
<div className="main-wrapper">
<ListPicker/>
<ListPane/>
</div>
);
const Search = () => (
<div className="search-wrapper">
<ul className="search-results">
<li>Search Results</li>
</ul>
</div>
);
return (
<div className="app-wrapper">
<Title/>
<SearchBar listResults={this.listResults}/>
<Route exact path="/" component={Main}/>
<Route path="/search" component={Search}/>
</div>
)
}
}
Which is rendered in index.js:
import React from 'react';
import { render } from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import App from './components/App';
const Root = () => {
return (
<Router>
<div>
<Route exact path="/" component={App}/>
</div>
</Router>
)
};
render(<Root/>, document.getElementById('root'));
Towards the bottom of App you can see I'm trying to have either the Main component or Search component render below <Title/> and <SearchBar/> based on the paths / or /search. As far as I can tell from the React-Router docs, I'm doing what's shown in their example app, but I can't get this to work correctly. With this current setup Main renders fine at / but when navigating to /search nothing renders inside of <Root/>. I also tried wrapping those two <Routes/> in a <Switch/> but got the same result. Am I missing something?
You put a exact Route in you index.js. So the route /search can't find a way. So change to:
const Root = () => {
return (
<Router>
<div>
<Route path="/" component={App}/>
</div>
</Router>
)
};