用React Router路由目录

Question

I used to have my homepage in /home . I want to migrate it to the base url / .

When I did

<Route
    path="home"         
    component={HomePage}
/>

I could access the page at localhost/home

If I want to use the base directory, I get a blank page, I have tried

<Route
    path=""         
    component={HomePage}
/>

and (just in case)

<Route
    path="/"            
    component={HomePage}
/>

The App.js is receiving empty props.children too, although I am only sending an empty string as the path name and the rest remains the same.

What the app renders is this

render() {
  return (
    <div>
      {this.props.children}
    </div>
  );
}

When the route is not an empty string, the props children is full of properties like key, props, type, etc

Answer 1

If you only have one route and no other routes that code should be fine. If you have other routes then that code will start to have problems as path='/about' or path='/info' all contain '/' so the use of exact path instead is necessary, for the base route at least. Or you could use switch to match the first route it finds but I'll just stick to the question at hand.

//routes.js

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Component1}/>
      <Route exact path="/about" component={Component2}/>
    </div>
  </Router>
)

export default App;

//render.js

ReactDOM.render(<App />, document.getElementById('root'));

This should work but please reply if not. Take care!