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, Oct 24 '17 at 10:44
Instead of using Link , i'm passing the data from my app url manually(for some reasons) . — Beckham_Vinoth, Oct 24 '17 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, Oct 24 '17 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 , i want this — Beckham_Vinoth, Oct 24 '17 at 11:33
because i have only 2 routing , 1. default home ("/") and 2. Person page (/personpage:id) — Beckham_Vinoth, Oct 24 '17 at 11:34
When you do path="/personPage/:id" do you get any error in console? or you just see a blank page ? — Aaqib, Oct 24 '17 at 12:04
my errors are like this: GET http://localhost:3060/xx/css/bundle.css net::ERR_ABORTED — Beckham_Vinoth, Oct 24 '17 at 12:25

Andrzej Dybionka · Answer 1 · 2017-10-24T17:31:05.330

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 '17 at 17:31

answered Oct 24 '17 at 10:50

Andrzej Dybionka

271
1
7

@Beckham_Vinoth - I edited my answer. Please check now. – Andrzej Dybionka Oct 24 '17 at 16:32
tnx a lot for your effort bro :) , but i need like this --> – Beckham_Vinoth Oct 24 '17 at 16:36
the path should have some name --> /someName/:parameterData – Beckham_Vinoth Oct 24 '17 at 16:37
1

I added prefix "/user/" to url and it also works. Please check it https://stackblitz.com/edit/react-qqpraz – Andrzej Dybionka Oct 24 '17 at 17:31
It is working nice in `stackblitz` . Let me implement this in my code and update you here :) – Beckham_Vinoth Oct 24 '17 at 18:17
Everything works good in ` stackblitz ` but it is showing error in App alone , it is related to some bundle.js issues i think . will add a separate question for that – Beckham_Vinoth Oct 26 '17 at 11:00

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

1 Answers1