天道酬勤,学无止境

React router dynamic routes not rendering component

I’m trying to get react router dynamic routing to work by following this example: https://github.com/rackt/react-router/tree/master/examples/huge-apps

Here’s my setup:

webpack.config.js:

module.exports = {
  devtool: 'inline-source-map',
  entry: './js/app.js',
  output: {
    path: '../public',
    filename: 'test-app.js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/public/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: [
            'es2015',
            'react'
          ]
        }
      }
    ]
  }

./js/app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createHistory, useBasename } from 'history';
import { Router } from 'react-router';

const history = useBasename(createHistory)({
  basename: '/'
});

const rootRoute = {
  component: 'div',
  childRoutes: [{
    path: '/',
    component: require('./components/App')
  }]
};

ReactDOM.render(
    <Router history={history} routes={rootRoute} />,
    document.getElementById('root')
);

./components/App.js:

import React from 'react';

console.log('testing');

export default class App extends React.Component {
  render() {
    console.log('App');
    return (
        <div>
          App!
        </div>
    )
  }
}

index.html:

<!doctype html>
<html>
    <head>
        <title>Test App</title>
    </head>
    <body>
        Hello
        <div id="root"></div>
        <script src="public/test-app.js"></script>
    </body>
</html>

When I run the server, I see Hello displayed from index.html, I also see console.log('testing') from App.js, but the actual App.js component does not render. Any ideas why?

Thanks!

EDIT: If I change ./components/App.js to ES5 syntax below, it works! Why is that? Does react router's component: require('./components/App') not work with ES6?

var React = require('react');

var App = React.createClass({
  render: function() {
    return (
      <div>
        App!
      </div>
    )
  }
});

module.exports = App;

评论

I think, you are using Babel 6, where they changed commonjs require syntax.

Now, you need to add the default:

component: require('./components/App').default

I had the same problem, finally found how to make it work.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • React-router/react-router-dom学习指南(附代码)
    React-router/react-router-dom学习指南(附代码) 目录 1. 快速入门 2. 基本组件 3. 服务器渲染 4. 代码拆分 5. 滚动恢复 6. 原理(动态路由/静态路由) 7. 测试 8. Redux 融合 9. 静态路由 1.快速入门 您需要一个React web应用程序来添加react -router。 如果你需要创建一个,最简单的方法就是使用一个叫做create React App的脚手架工具。 首先安装create- response -app(如果你还没有的话),然后用它创建一个新项目。 npm install -g create-react-app create-react-app demo-app cd demo-app 安装 React Router DOM发布到npm,因此您可以使用npm或yarn安装它。npm安装react-router-dom 将下面的示例复制/粘贴到src/App.js中。 npm install react-router-dom 例子:基本的路由 在这个例子中,我们有3个由处理的“页面”组件。注意:我们使用<Link to="/"> 而不是<a href="/">。 import React from "react"; import { BrowserRouter as Router, Route, Link
  • Invariant Violation: The root route must render a single element error in react-router 2 dynamic routing
    I have simple Hello World App with one route no child route or index route. For routing i using plain routes instead of jsx sysntax. Again i am using react-router's dynamic routing to load Hello component with webpack. My app.jsx file has the following code. import React from "react"; import ReactDOM from "react-dom"; import {Router, browserHistory} from "react-router"; import Hello from "./components/Hello"; const routes = [{ path:"/", getComponents(location, callback) { require.ensure([], function (require) { callback(null, require('./components/Hello')) }) } }]; ReactDOM.render( <Router
  • react hooks权限管理系统
    文章目录 脚手架设置多环境配置设置别名设置代理动态生成路由和路由权限判断生成路由组件路由权限判断登录时路由重定向 动态生成菜单兼容ie问题 脚手架设置 /* npm5.2版本之前,执行npm init会在当前目录创建一个package.json文件 npm5.2以后,本质上调用npx,自动将react-app补全为create-react-app,继而下载并创建应用 */ npm init react-app my-admin --typescript /* 这个命令只能执行一次,而且不可逆转,它会把react-scripts封装的一些webpack配置等全部解压到项目目录,项目结构中会多出config和script两个目录*/ npm eject 多环境配置 create-react-app 的官方文档可以发现,create-react-app 默认是支持多个环境配置文件的: .env:默认 .env.local:本地替代。该文件适用于除测试以外的所有环境 .env.development,.env.test,.env.production:环境特定的设置 // .env.development .env.production REACT_APP_NODE_ENV='development' REACT_APP_URL = '/api/' REACT_APP_TARGET =
  • react-router-dom简介
    react-router-dom react-router-dom文档地址: https://reacttraining.com/react-router/ 1. 安装 react-router提供多个包可以单独使用 packagedescriptionreact-router路由核心功能react-router-dom基于react-router提供在浏览器运行环境下功能react-router-nativefor React Nativereact-router-configstatic route congif helpers 在浏览器中运行只需要安装react-router-dom,reac-router-dom依赖react-router会自动安装依赖,所以不需要再手动安装react-router npm install react-router-dom -S // 或者 yarn add react-router-dom 2. 路由组件 react-router包含三种类型的组件:路由组件、路由匹配组件 、导航组件。在你使用这些组件的时候,都必须先从react-router-dom引入。 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; 2.1 路由组件
  • React 0基础学习路线(6)— 图解深度详述React路由及其详细案例(附详细案例代码解析过程)
    文章目录 1. 重点提炼2. React.js - 路由react-router-dom2.1 路由2.1.1 SPA2.1.2 SPA 的页面切换机制2.1.3 后端路由与前端路由2.1.3.1 后端路由2.1.3.2 前端路由2.1.3.2.1 URL Hash2.1.3.2.2 HTML5 History API 2.1.4 React.js 中的路由 2.2 React Router2.2.1 基于 Web 的 React Router2.2.1.1 安装2.2.1.2 概览 2.3 基础2.3.1 应用场景(一)2.3.1.1 Router 组件2.3.1.1.1 exmaple012.3.1.1.1.1 exmaple01-12.3.1.1.1.2 example01-2 2.3.1.1.2 BrowserRouter 组件2.3.1.1.3 HashRouter 组件 2.3.1.2 Route 组件2.3.1.2.1 exact 2.3.1.3 Link 组件2.3.1.3.1 to 属性 2.3.1.4 example022.3.1.4.1 example02-12.3.1.4.2 example02-22.3.1.4.3 example02-32.3.1.4.4 example02-42.3.1.4.5 example02-5 2.3.2 应用场景(二)2.3
  • How to create dynamic routes with react-router-dom?
    I learn react and know, how to create static routes, but can't figure out with dynamic ones. Maybe someone can explain, I'll be very grateful. Let there be two components, one for rendering routes, and another as a template of a route. Maybe something wrong in the code, but hope You understand.. Here is the component to render routes: import React, { Component } from 'react'; import axios from 'axios'; import Hero from './Hero'; class Heroes extends Component { constructor(props) { super(props); this.state = { heroes: [], loading: true, error: false, }; } componentDidMount() { axios.get('http
  • react-router-dom 官方示例解读(上)
    react-router-dom 官方示例解读 说明官方文档BasicExample--基础实例UrlParams--动态路由Nesting--嵌套路由AuthRoute--路由鉴权 学习资源推荐 微信扫码关注公众号 :前端前端大前端,追求更精致的阅读体验 ,一起来学习啊关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程 说明 该篇文章是对react-router-dom 官方示例的解读,例子有些会使用原始demo,有些为了方便理解会使用我自己写的。当然,如果有能力的话,还是推荐官方文档。 官方文档 doc BasicExample–基础实例 分析 这是一个最基础的路由示例,根据不同的url渲染不同的组件。值得注意的是,对于Route组件而言,支持的渲染组件方式不唯一。单标签的时候可以使用component属性,render属性,或者children属性挂载要渲染的组件。双标签的时候包裹要渲染的组件,也就是children… import React from 'react' import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; const Home = () => <h2>Home</h2> const About = () => <h2
  • React路由-react-router-dom安装与使用(一)
    1、路由 当应用变得复杂的时候,就需要分块的进行处理和展示。 传统方式的处理: 把整个应用分成了多个页面,然后通过 URL 进行连接。 传统方式的弊端: 每次切换页面都需要重新发送所有请求和渲染整个页面,性能上会有影响;会导致整个 JavaScript 重新执行,丢失状态。 2、单页面应用 单页面应用SPA(Single Page Application): 整个应用只加载一个页面(入口页面), 后续在与用户的交互过程中,通过 DOM 操作在这个单页上动态生成结构和内容。 **单页面应用优缺点**如下: 优点缺点有更好的用户体验(减少请求、渲染以及页面跳转等待),页面切换快首次进入页面处理比较慢(请求减少,在同一页面内容就增多了,加载时间随之增加)数据和页面内容由异步请求(AJAX)+ DOM 操作来完成,前端处理更多的业务逻辑不利于搜索引擎优化(SEO) 3、SPA 的页面切换机制 虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的,但是还是需要根据需求在不同的情况下分内容展示,如果仅仅只是依靠 JavaScript 内部机制去判断,逻辑会变得过于复杂,通过把 JavaScript 与 URL 进行结合的方式:JavaScript 根据 URL 的变化,来处理不同的逻辑,交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript
  • React导航守卫介绍【七日打卡】
    在前面《React路由介绍》博文中,介绍了React路由相关知识,在实际项目开发过程中,路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定,故需要导航守卫来完成这一事项。在我们自己实现react-router的路由拦截之前,我们先看一下vue的路由拦截是怎么使用的,都做到了哪些事情:正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...复制代码当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。在这里,我们可以看到,vue在所有的路由跳转前,在beforeEach中可以监听所有的路由跳转,如果符合规则,就进行跳转,如果不符合,那么就跳转到我指定的位置。react-router当中,为什么不能提供同样的api呢?作者在github中回复到: You can do this from within your render function. JSX doesn't need an API for this because it's
  • How to pass state from a Router to a Sub-Component
    I am using react-router 2.0.0. Consider the following example: import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, IndexRoute, hashHistory } from 'react-router'; const Main = React.createClass({ getInitialState() { return {data: 0}; }, componentDidMount() { setInterval(() => { console.log("Imagine I am polling data from a server here"); this.setState({data: Math.random().toFixed(2)}); }, 2000); }, render() { return <Router history={hashHistory}> <Route path="/"> <IndexRoute component={MainPage} data={this.state.data}/> <Route path="page1" component={Page1} data
  • react-router-将道具传递给处理程序组件(react-router - pass props to handler component)
    问题 对于使用React Router的React.js应用程序,我具有以下结构: var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 我想将一些属性传递到“ Comments组件中。 (通常,我会像<Comments myprop="value" />那样执行此操作) 用React Router做到这一点最简单,正确的方法是什么? 回答1 更新 自新版本发布以来
  • 将React-Router用于布局页面或每页面多个组件(Using React-Router with a layout page or multiple components per page)
    问题 我正在将React Router添加到现有项目中。 目前,模型被传递到一个根组件中,该根组件包含用于子导航的导航组件和一个主组件。 我发现的React Router的示例只有一个子组件,在不重复两个子组件的情况下改变两个子组件的最佳方法是什么? 回答1 如果我正确理解您的要求,则可以在Route定义多个组件。 您可以像这样使用它: // think of it outside the context of the router, if you had pluggable // portions of your `render`, you might do it like this <App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/> // So with the router it looks like this: const routes = ( <Route component={App}> <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}}/> <Route path="users" components={{main: Users, sidebar: UsersSidebar}}> <Route path=
  • Nesting routes and dynamically routing in React-router v4
    I have following routing configuration: return (<div> <Router> <div> <Route path='/login' component={LoginPage}/> <EnsureLoggedInContainer> <Route path='/abc' component={abc} /> </EnsureLoggedInContainer> </div> </Router> </div> ); The EnsureLoggedInContainer is: import React from 'react'; import { connect } from "react-redux"; class EnsureLoggedInContainer extends React.Component { componentDidMount() { if ( !this.props.isLoggedIn ) { // this.props.history.push('/login'); this.context.router.push('/contact'); } } render() { // console.log(this.props); if ( this.props.isLoggedIn ) { return
  • React react-router-dom配置 实现动态路由切换
    react-router-dom 实现路由切换,前期已经安装过 react-router-dom。这里增加 store 状态绑定。 // AppRouterLayout.tsx import * as React from 'react'; import { BrowserRouter as Router, Link } from 'react-router-dom'; // eslint-disable-next-line import { HashRouter, Route, Switch } from 'react-router-dom'; import { Provider } from "react-redux"; import store from "./store"; import App from './App'; import Demo from './views/demo/Demo'; import TodoList from './views/todoList/TodoList'; import ReactRouter from './views/reactRouter/ReactRouter'; import ReactRouterDetail from './views/reactRouter/ReactRouterDetail'; export
  • 客户端路由(使用react-router)和服务器端路由(Client Routing (using react-router) and Server-Side Routing)
    问题 我一直在想,我对客户端和服务器之间的路由感到困惑。 假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端渲染,并使用react-router作为客户端路由在页面之间切换而不刷新为SPA。 我想到的是: 路线如何解释? 例如,从首页( /home )到帖子页面( /posts )的请求路由在服务器端还是客户端去哪里? 它如何知道如何处理? 回答1 注意,此答案涵盖了React Router版本0.13.x-即将发布的版本1.0看起来将具有明显不同的实现细节 服务器 这是带有react-router的最小server.js : var express = require('express') var React = require('react') var Router = require('react-router') var routes = require('./routes') var app = express() // ...express config... app.use(function(req, res, next) { var router = Router.create({location: req.url, routes: routes}) router.run(function(Handler, state) { var html =
  • React:React入门及基本使用,JSX,state、props、refs、虚拟DOM,面向组件编程,组件生命周期,脚手架及应用,Ajax、router、UI组件库AntDesign、redux
    React全家桶(技术栈) 第1章:React入门 1.1. React的基本认识 1.1.1. 官网 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 1.1.2. 介绍描述 1) 用于构建用户界面的 JavaScript 库(只关注于View) 2) 由Facebook开源 1.1.3. React的特点 1) Declarative(声明式编码) 2) Component-Based(组件化编码) 3) Learn Once, Write Anywhere(支持客户端与服务器渲染) 4) 高效 5) 单向数据流 1.1.4. React高效的原因 1) 虚拟(virtual)DOM, 不总是直接操作DOM 2) DOM Diff算法, 最小化页面重绘 1.2. React的基本使用 注意: 此时只是测试语法使用, 并不是真实项目开发使用 1.2.1. 效果 1.2.2. 相关js库 1) react.js: React的核心库 2) react-dom.js: 提供操作DOM的react扩展库 3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库 1.2.3. 在页面中导入js <script type="text/javascript" src="../js
  • 在react-router v4中获取路径参数(Get path params in react-router v4)
    问题 我正在尝试通过我的应用程序建立路由器链接, 在这种情况下,我有三个文件。 App.js Book.js DetailedView.js 我在Book的内部建立了一个<Link> ,该<Link>仅在悬停时才会显示(在书的封面上) {this.state.isHovered ? ( <Link to={`/details/${this.props.book.industryIdentifiers[1].identifier}`}> <div className="hover-box"></div> </Link>) : ( <div /> )} 这将带我到/ details / 12345(isbn10号) 我很难理解的是,例如在按下<Link>时如何设置setState({iPressedThisBook}) ,或者是否可以使用/12345之后的部分来创建像过滤器一样的内容 因为在App该Route将被连接为... <Route path="/details/:id" render={() => ( <BookDetailedView bookStateUpdated = {this.bookStateUpdated} book = {this.state.books} /> )}/> 稍后,我想抓取:id以便例如在<BookDetailedView>内部制作this
  • Dynamic breadcrumbs using react router
    There is very good example of how to make a breadcrumbs on site in examples folder of react-router repo. But I'm wondering how to make breadcrumbs with dynamic routes. Assume we have this configuration: ReactDOM.render(( <Router history={browserHistory}> <Route path="/projects" component={ProjectsApp}> <IndexRoute component={ProjectsDashboard} /> <Route path=":projectId" component={ProjectBoard}> <Route path=":taskId" component={ProjectTaskBoard}> </Route> </Route> </Router> ), document.getElementById('app')); I want to make something like this: Projects(link to '/projects') ->
  • 如何通过erikras在通用反应redux样板中的侧边栏中为生成的菜单项在routes.js中实现动态路由(How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras)
    问题 我目前正在从事基于CMS的项目。 我为此使用erikras的Universal React Redux样板 我真的需要有关处理动态路由的建议 让我们以一个简单的场景作为样板... 在routes.js中 <Route path="about" component={About}/> <Route path="login" component={Login}/> <Route path="survey" component={Survey}/> <Route path="widgets" component={Widgets}/> data.js export const data = [ {id: 1, property: 'Dashboard', link: '/'}, {id: 2, property: 'Login', link: '/login'}, {id: 3, property: 'About Us', link: '/About'}, ]; 现在,假设根据用户角色,json数据中的属性将更改 假设新属性:是 {id: 4, property: 'test page', link: '/test'} 当react将呈现组件时,它将如何知道路由链接..,因为未在route.js中定义 我没有正确的方法来实现它 根据用户角色,我们需要由特定菜单内容组成的侧边栏。
  • 你不应该使用外(You should not use <Link> outside a <Router>)
    问题 我正在尝试在示例应用程序中设置react-router,但出现以下错误: You should not use <Link> outside a <Router> 我的应用程序设置如下: 父组件 const router = ( <div className="sans-serif"> <Router histpry={browserHistory}> <Route path="/" component={Main}> <IndexRoute component={PhotoGrid}></IndexRoute> <Route path="/view/:postId" component={Single}></Route> </Route> </Router> </div> ); render(<Main />, document.getElementById('root')); 子/ Main组成部分 export default () => ( <div> <h1> <Link to="/">Redux example</Link> </h1> </div> ) 知道我在这里做错了什么吗? 这是一个沙盒链接来演示该问题。 回答1 我假设您使用的是React-Router V4,就像您在原始Sandbox Link中使用的一样。 您正在对ReactDOM