当文件分离时，React Router v4 不渲染任何内容 [英] React Router v4 not rendering anything when files separated

问题描述

我已经能够在单个文件中使用它，但是将路由移动到 route.js 会导致组件无法呈现.显然我错过了一些东西.我看过很多教程，但它们似乎都是针对 React Router <v4.0

index.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；进口 {BrowserRouter 作为路由器，关联，路线来自'反应路由器-dom';从'react-hot-loader'导入{ AppContainer}；从'./routes.js'导入路由；ReactDOM.render(<路由器><div><Link to="/">/</Link><br/><Link to="/login">登录</Link><br/>

</路由器>,document.getElementById('root'),);//热模块更换 API如果(模块.热){module.hot.accept('./Home/Home', () => {渲染(首页)；});}

routes.js

从'react'导入React；进口 {BrowserRouter 作为路由器，路线来自'反应路由器-dom';从 'react-dom' 导入 ReactDOM；从'./Home/Home'导入Home；从 './Login/Login' 导入登录；导出默认值 (<Route path="/" component={Home}><Route path="/login" component={Login}/></路线>)

我已经尝试将 route.js 的底部实际结构如下，但出现错误

<块引用>

相邻的 JSX 元素必须包含在一个封闭的标签中

所需的route.js

导出默认值 (<路由精确路径="/" component={Home}/><Route path="/login" component={Login}/>)

如果我更改此设置以便将其全部包含在 index.js 中，如下所示，一切都会按预期进行.

工作 index.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；进口 {BrowserRouter 作为路由器，关联，路线来自'反应路由器-dom';从'react-hot-loader'导入{ AppContainer}；从'./Home/Home'导入Home；从 './Login/Login' 导入登录；ReactDOM.render(<路由器><div><Link to="/">/</Link><br/><Link to="/login">登录</Link><br/><路由精确路径="/" component={Home}/><Route path="/login" component={Login}/>

</路由器>,document.getElementById('root'),);//热模块更换 API如果(模块.热){module.hot.accept('./Home/Home', () => {渲染(首页)；});}

为了避免问题太长，我最初没有粘贴我的组件代码.如果这有帮助，请在评论中告诉我.

如果它也有所作为，我正在使用 ExpressJS、Webpack 和 React Hot Loader.

解决方案

虽然你已经导入了 routes 你还没有在你的组件中使用它们

使用

ReactDOM.render(<路由器><div><Link to="/">/</Link><br/><Link to="/login">登录</Link><br/>

{路线}</路由器>,document.getElementById('root'),);

你的 routes.js 文件将是

从'react'导入React；进口 {BrowserRouter 作为路由器，转变路线来自'反应路由器-dom';从 'react-dom' 导入 ReactDOM；从'./Home/Home'导入Home；从 './Login/Login' 导入登录；导出默认值 (<开关><路由精确路径="/" component={Home}/><Route path="/login" component={Login}/></开关>)

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.

解决方案

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>
)

这篇关于当文件分离时，React Router v4 不渲染任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！