named path not working in react-router-dom react js

Question

I am using react-router-dom for routing purposes. This is my code:

//Libraries
import React from 'react';
import { Tabs, Tab } from 'react-tabify';
import { connect } from 'react-redux';
import {
  BrowserRouter as Router,
  Route,
  withRouter
} from 'react-router-dom';

//Components
import HomePage from './containers/HomePage';
import PersonsPage from './containers/PersonsPage';

const App = () => (
  <Router>
    <div style={{height: '100%', width: '100%'}}>
      <Route exact path="/" component={HomePage}/>
      <Route exact path="/:id" component={PersonsPage}/>

      // here i want to use like this --> <Route exact path="/personPage/:id" component={PersonsPage}/>


    </div>
  </Router>
)
export default withRouter(connect()(App));

Route exact path="/:id" component={PersonsPage}/> this works , but this Route exact path="/personPage/:id" component={PersonsPage}/> this didn't works for me . Can someone clarify/help me from this pls

It may not work if you are having you Link component path like /12. can you show how are you routing — Shubham Khatri
– Shubham Khatri, Commented Oct 24, 2017 at 10:44
Instead of using Link , i'm passing the data from my app url manually(for some reasons) . — Beckham_Vinoth
– Beckham_Vinoth, Commented Oct 24, 2017 at 10:47
What is the order of your routes? did you try putting route with path="/personPage/:id" before route with path="/:id"? — bennygenel
– bennygenel, Commented Oct 24, 2017 at 10:51
no need of order here i think . i want to know how to use name instead of that empt route . Ex: instead of this <path="/:id"> , i want <path="/personPage/:id"> this — Beckham_Vinoth
– Beckham_Vinoth, Commented Oct 24, 2017 at 11:33
because i have only 2 routing , 1. default home ("/") and 2. Person page (/personpage:id) — Beckham_Vinoth
– Beckham_Vinoth, Commented Oct 24, 2017 at 11:34

Andrzej Dybionka · Accepted Answer · 2017-10-24 17:31:05Z

1

I think you should simply wrap your routers in Switch component. But remember to put <Route exact path="/:id" component={PersonsPage}/> as last entry.

Here you have an example in one file:

import React, { Component } from 'react';
import { render } from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  withRouter
} from 'react-router-dom';

const HomePage = () => (
  <div>
    <h1>HomePage</h1>
    <ul>
      <li><Link to="/user/Tom">Tom</Link></li>
      <li><Link to="/user/John">John</Link></li>
      <li><Link to="/user/Andy">Andy</Link></li>
    </ul>
  </div>
);

const PersonsPage = (props) => (
  <div>
    <h1>Profile: {props.match.params.name}</h1>
  </div>
);

class App extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={HomePage}/>
        <Route exact path="/user/:name" component={PersonsPage}/>
      </Switch>
    );
  }
}

const AppWithRouter = withRouter(App);

render(
  <Router>
    <AppWithRouter />
  </Router>
  , document.getElementById('root')
);

Here you have link to working version https://stackblitz.com/edit/react-qqpraz

edited Oct 24, 2017 at 17:31

answered Oct 24, 2017 at 10:50

Andrzej Dybionka

2711 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andrzej Dybionka Over a year ago

@Beckham_Vinoth - I edited my answer. Please check now.

Beckham_Vinoth Over a year ago

tnx a lot for your effort bro :) , but i need like this --> <Route exact path="/PersonsPage/:id" component={PersonsPage}/>

Beckham_Vinoth Over a year ago

the path should have some name --> /someName/:parameterData

Andrzej Dybionka Over a year ago

I added prefix "/user/" to url and it also works. Please check it stackblitz.com/edit/react-qqpraz

Beckham_Vinoth Over a year ago

It is working nice in stackblitz . Let me implement this in my code and update you here :)

|

Collectives™ on Stack Overflow

named path not working in react-router-dom react js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related