Pages are merging for Reactjs routing?

Asked
Active3 hr before
Viewed126 times

8 Answers

pagesmergingreactjs
90%

Thanks for contributing an answer to Stack Overflow!, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Meta Stack Overflow

You can write the routes wrapped by a switch component and reorder them so that the first matching route is rendered

<Switch>
    <Route path='/(user/settings)/:param1'   component={UserSettings}/>
    <Route path='/user/:param1'   component={routeProps => <MyTab {...routeProps} remotes={remotes} />}/>
</Switch>

You could simply use exact keyword on both the routes like

<Route exact path='/user/:param1'   component={routeProps => <MyTab {...routeProps} remotes={remotes} />}/>
<Route exact path='/(user/settings)/:param1'   component={UserSettings}/>
load more v
88%

Here we are going to build a website with multiple routes instead of multiple pages. Because React is not designed to develop multi-page websites. So, we need to create multiple routes to handle multiple views.,So we are building a React app with multiple routes and it requires a package react-router-dom. Install it with NPM.,How to Create a Multi-page Website with React in 5 Minutes

So, after a successful installation of Node.js, create a React application using NPX.

npx create - react - app react - multi - page - website
load more v
72%

This section covers how to add a base URL in a simple React app using React Router.,The app may also be running on a different path (https://example.com/app) and not on the root domain, adding additional complexity. In this guide, you will learn how to set up a base URL in React Router and how to combine Redux seamlessly.,In this section, you will integrate Redux with the above React Router set up.

1n pm i react - router - dom
load more v
65%

This will developed a static website on web server on port 3000 on your machine. This also launch your browser to navigate http://localhost:3000.,Now launch the application,The "package.json" will get update and may look like as below (**Don't update manually**)

First, head over to nodejs.org and install Node if you already don't have it on your machine. Now, open up the Terminal on Mac or Command Prompt on Windows and run the following command to install create-react-app package.

npm install - g create - react - app

Now, type the following command to create a new react app:

create - react - app example

Now, go to the project folder:

cd example

Install Dependencies for this Project

npm install--save react - router - dom
{
   "name": "example5",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-router-dom": "^5.0.0",
      "react-scripts": "2.1.8"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": "react-app"
   },
   "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
   ]
}
{
   "name": "example5",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-router-dom": "^5.0.0",
      "react-scripts": "2.1.8"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": "react-app"
   },
   "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
   ]
}
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
 
class App extends Component {
  render() {
    return (      
       <BrowserRouter>
        <div>
          <Navigation />
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
            <Route component={Error}/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}
 
export default App;
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
 
class App extends Component {
  render() {
    return (      
       <BrowserRouter>
        <div>
          <Navigation />
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
            <Route component={Error}/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}
 
export default App;
import React from 'react';
 
const home = () => {
    return (
       <div>
          <h1>Home</h1>
           <p>Home page body content</p>
       </div>
    );
}
 
export default home;
import React from 'react';
 
const home = () => {
    return (
       <div>
          <h1>Home</h1>
           <p>Home page body content</p>
       </div>
    );
}
 
export default home;
import React from 'react';
 
const About = () => {
    return (
       <div>
          <h1>About US</h1>
          <p>About US page body content</p>
       </div>
    );
}
 
export default About;
import React from 'react';
 
const About = () => {
    return (
       <div>
          <h1>About US</h1>
          <p>About US page body content</p>
       </div>
    );
}
 
export default About;
import React from 'react';
 
const Contact = () => {
    return (
       <div>
          <h1>Contact US</h1>
          <p>Contact US page body content</p>
       </div>
    );
}
 
export default Contact;
import React from 'react';
 
const Contact = () => {
    return (
       <div>
          <h1>Contact US</h1>
          <p>Contact US page body content</p>
       </div>
    );
}
 
export default Contact;
import React from 'react';
 
const Error = () => {
    return (
       <div>
          <p>Error: Page does not exist!</p>
       </div>
    );
}
 
export default Error;
import React from 'react';
 
const Error = () => {
    return (
       <div>
          <p>Error: Page does not exist!</p>
       </div>
    );
}
 
export default Error;
import React from 'react';
 
import { NavLink } from 'react-router-dom';
 
const Navigation = () => {
    return (
       <div>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/contact">Contact</NavLink>
       </div>
    );
}
 
export default Navigation;
import React from 'react';
 
import { NavLink } from 'react-router-dom';
 
const Navigation = () => {
    return (
       <div>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/contact">Contact</NavLink>
       </div>
    );
}
 
export default Navigation;

Now launch the application

npm start
load more v
75%

Here’s an example of how to setup route-based code splitting into your app using libraries like React Router with React.lazy.,Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.,Integrating with Other Libraries

// app.js
import {
   add
} from './math.js';

console.log(add(16, 26)); // 42
load more v
40%

The next major version of React Router, version 6, is just around the corner. We published the first alpha release back in January, and we released another alpha last week.,If you compare this example with the previous one, you'll notice a few things:,If you're interested in submitting a PR, please read through the contributing guidelines first. They'll help you get all setup.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  /* All <Route path> and <Link to> values in this
     component will automatically be "mounted" at the
     /users URL prefix since the <Users> element is only
     ever rendered when the URL matches /users/*
  */
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<UsersIndex />} />
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}
load more v
22%

To navigate programmatically we need to take the help of history object which is passed by the react-router.,To install the react router you need to download the react-router-dom package by running the following commands.,How to install the react-router?

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Nice, code splitting works now! Lets combine that with react-router.,Lets rework our example above to support asynchronous components:,react-router as a routing solution, because its the most complete and feature-rich routing solution for React

This is our example setup with standard react-router routes:

var HomePage = require('./HomePage.jsx');
var AboutPage = require('./AboutPage.jsx');
var FAQPage = require('./FAQPage.jsx');

<Router history={history}>
  <Route path="/" component={HomePage} />
  <Route path="/about" component={AboutPage} />
  <Route path="/faq" component={FAQPage} />
</Router>
load more v

Other "pages-merging" queries related to "Pages are merging for Reactjs routing?"