React-Router：如何避免在 div 中包装 <Route /> 元素

Question

如何避免对 App.js 中的所有路由使用环绕？（使用 react-route v4）

App.js

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

 class App extends Component {
  render() {
    return (
      <div> // <-- I want to avoid this div to have cleaner css
        <Route path="/" component={Analytics} />
        <Route exact path="/" component={Page_1} />
        <Route exact path="/page-2" component={Page_2} />
        <Route exact path="/page-3" component={Page_3} />
      </div>
    )
  }
}

Index.js

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

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

Answer 1

在 React 16 之前你必须这样做，从 React 16.2 开始你可以使用 Fragments：见 https://reactjs.org/docs/fragments.html

例如

  render() {
    return (
      <React.Fragment> //could also be just <>
        <Route path="/" component={Analytics} />
        <Route exact path="/" component={Page_1} />
        <Route exact path="/page-2" component={Page_2} />
        <Route exact path="/page-3" component={Page_3} />
      <React.Fragment>
    )
  }

或者如果您愿意，您可以 return 一个元素数组：

      render() {
        return [
            <Route key="1" path="/" component={Analytics} />,
            <Route key="2" exact path="/" component={Page_1} />,
            <Route key="3" exact path="/page-2" component={Page_2} />,
            <Route key="4" exact path="/page-3" component={Page_3} />
        ]
      }

（记得把钥匙放进去）

React-Router：如何避免在 div 中包装 <Route /> 元素

React-Router: How to avoid wrapping <Route /> elements in div

reactjs

react-router-v4

react-router-dom