How to set the '/' as the default path in routing in reactjs?

Question

I have publish the UI inside the api Service, but I want to start the url from '/'.But it is coming as the http://localhost:8090/UI/.the problem is that in route config I have set the routing as:-

ReactDOM.render((
  <Router history={browserHistory}>
   <Route path="/" component={Login}/>
   <Route path="main" component={main}>
     <IndexRoute component={Home} />
    <Route path = "/Accession" component = {Home} />
     <Route path="/contact" component={Contact}/>
 </Route>
  </Router>
), document.getElementById('App'));

Error: /UI/ is not defined in route.To solve this I have to change the route as Route path="/UI/".How can I set the '/' as the initial path?

@AmoolyaSKumar I have written but when runing in browser by root path is coming as http://localhost:8090/UI/ as I mentioned above. — Gorakh Nath, Dec 01 '16 at 10:52

Amoolya S Kumar · Answer 1 · 2016-12-01T11:48:53.380

0

Try this:

 ReactDOM.render((
 <Router history={browserHistory} routes={
  [<Route path = '/' component={Login}>
   <Route path="main" component={main}>
     <IndexRoute component={Home} />
     <Route path = "/Accession" component = {Home} />
     <Route path="/contact" component={Contact}/>
   </Route>
</Route>]} />

), document.getElementById('App'));

edited Dec 01 '16 at 11:48

answered Dec 01 '16 at 10:51

Amoolya S Kumar

1,458
9
10

Thanks for your answer but this we dont want because If I do like this then in every system we have to change that name because every one have there own publish name ,we want like this – Gorakh Nath Dec 01 '16 at 11:04
error is coming:Uncaught Error: elements are for router configuration only and should not be rendered(…), The problem I noticed in my URL is that /#/ is not coming in my url .I don't have any idea why its not coming? – Gorakh Nath Dec 01 '16 at 11:36
same error coming as I was getting before:- browser.js:49Warning: [react-router] Location "/UI/" did not match any routes – Gorakh Nath Dec 01 '16 at 12:02

score 0 · Answer 2 · answered Dec 02 '16 at 12:18

For me following code works:-

import { Router,Route,IndexRoute, hashHistory, Link } from '../node_modules/react-router';

ReactDOM.render((
  <Router history={hashHistory}>
   <Route path="/" component={Login}/>
   <Route path="/main" component={main}>
     <IndexRoute component={Home} />
    <Route path = "/Accession" component = {Home} />
     <Route path="/contact" component={Contact}/>
 </Route>
  </Router>
), document.getElementById('App'));

So instead of browserHistory use the hashHistory

How to set the '/' as the default path in routing in reactjs?

2 Answers2