React Router v4 not rendering anything when files separated

问题

I have been able to get this to work with a single file, but moving routes to a route.js results in the component not being rendered. Clearly I am missing something. I have looked at a lot of tutorials but they seems to all be for React Router < v4.0

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Link,
  Route
} from 'react-router-dom';

import { AppContainer } from 'react-hot-loader';

import routes from './routes.js';

ReactDOM.render(
  <Router>
    <div>
      <Link to="/">/</Link><br />
      <Link to="/login">Login</Link><br />
    </div>
  </Router>,
  document.getElementById('root'),
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./Home/Home', () => {
    render(Home);
  });
}

routes.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';
import ReactDOM from 'react-dom';

import Home from './Home/Home';
import Login from './Login/Login';


export default (
  <Route path="/" component={Home}>
    <Route path="/login" component={Login} />
  </Route>
)

I have tried to actually have the bottom of route.js structured as below but i get an error

Adjacent JSX elements must be wrapped in an enclosing tag

Desired route.js

export default (
  <Route exact path="/" component={Home} />
  <Route path="/login" component={Login} />
)

If I change this so that I have it all in index.js as below, everything works as expected.

Working index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Link,
  Route
} from 'react-router-dom';

import { AppContainer } from 'react-hot-loader';

import Home from './Home/Home';
import Login from './Login/Login';

ReactDOM.render(
  <Router>
    <div>
      <Link to="/">/</Link><br />
      <Link to="/login">Login</Link><br />

      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
    </div>
  </Router>,
  document.getElementById('root'),
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./Home/Home', () => {
    render(Home);
  });
}

To save the question from getting too long I have not initially pasted my component code. If this is helpful let me know in the comments.

If it also makes a difference I am using ExpressJS, Webpack and React Hot Loader.

回答1:

Although you have imported routes you have not used them in your component

Use

ReactDOM.render(
  <Router>
    <div>
      <Link to="/">/</Link><br />
      <Link to="/login">Login</Link><br />
    </div>
    {routes}
  </Router>,
  document.getElementById('root'),
);

and your routes.js file will be

import React from 'react';
import {
  BrowserRouter as Router,
  Switch
  Route
} from 'react-router-dom';
import ReactDOM from 'react-dom';

import Home from './Home/Home';
import Login from './Login/Login';


export default (
  <Switch>
  <Route exact path="/" component={Home} />
  <Route path="/login" component={Login} />
  </Switch>
)

回答2:

You can use switch in route.js to export single element. Switch ensures only one Route component is being rendered.

import { Switch } from 'react-router-dom'

export default (
   <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
   </Switch>
)

来源：https://stackoverflow.com/questions/44368538/react-router-v4-not-rendering-anything-when-files-separated

标签

reactjs

react-router

react-router-v4