How can I config the basename, or keep a path in url like localhost:8000/app and when I have to redirect to another Route the Router identify this /app as part of url and do not change it, this is my ponent structure.

import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
<Router history={browserHistory} >
  <Route ponent={App}>
    <Route path="/" ponent={Home} />
    <Route path="/login" ponent={LoginContainer} />
    <Route path="apresentacao">
      <IndexRoute ponent={NameContainer} />
      <Route path="2" ponent={HsContainer} />
      <Route path="3" ponent={McContainer} />
      <Route path="4" ponent={MpvContainer} />
    </Route>
  </Route>
</Router>

How can I config the basename, or keep a path in url like localhost:8000/app and when I have to redirect to another Route the Router identify this /app as part of url and do not change it, this is my ponent structure.

import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
<Router history={browserHistory} >
  <Route ponent={App}>
    <Route path="/" ponent={Home} />
    <Route path="/login" ponent={LoginContainer} />
    <Route path="apresentacao">
      <IndexRoute ponent={NameContainer} />
      <Route path="2" ponent={HsContainer} />
      <Route path="3" ponent={McContainer} />
      <Route path="4" ponent={MpvContainer} />
    </Route>
  </Route>
</Router>

• javascript
• reactjs
• react-router

1 Answer 1

If you are using React Router v4, you can use the basename prop of the Router ponent to change the base of your app.

import React from "react";
import { Router, Route, browserHistory, IndexRoute } from "react-router";

class App extends React.Component {
  render() {
    return (
      <Router history={browserHistory} basename="/app">
        <Route ponent={App}>
          <Route path="/" ponent={Home} />
          <Route path="/login" ponent={LoginContainer} />
          <Route path="apresentacao">
            <IndexRoute ponent={NameContainer} />
            <Route path="2" ponent={HsContainer} />
            <Route path="3" ponent={McContainer} />
            <Route path="4" ponent={MpvContainer} />
          </Route>
        </Route>
      </Router>
    );
  }
}

If you are using React Router v3, you need to install the history package separately and use the useBasename function.

import React from "react";
import { Router, Route, browserHistory, IndexRoute } from "react-router";
import { useBasename } from 'history'

class App extends React.Component {
  render() {
    return (
      <Router history={useBasename(() => browserHistory)({ basename: '/app' })}>
        <Route ponent={App}>
          <Route path="/" ponent={Home} />
          <Route path="/login" ponent={LoginContainer} />
          <Route path="apresentacao">
            <IndexRoute ponent={NameContainer} />
            <Route path="2" ponent={HsContainer} />
            <Route path="3" ponent={McContainer} />
            <Route path="4" ponent={MpvContainer} />
          </Route>
        </Route>
      </Router>
    );
  }
}