React Router 渲染空白页

Posted 2023-02-21

【中文标题】React Router 渲染空白页

【英文标题】：React Router Renders Blank Page

【发布时间】：2017-06-21 08:59:39

【问题描述】：

我正在构建一个反应应用程序，反应路由器呈现一个黑页。我用谷歌搜索了一下，似乎无法弄清楚发生了什么。

索引

import React from 'react'
import render from 'react-dom'
import routes from './routes'
render(routes, document.getElementById('root'))

路线

import React,  Component  from 'react'
import  Router, Route, hashHistory  from 'react-router'
import Home from './Home.js'
import Name from './Name.js'
//import level from './level.js'
//import level1 from './level1.js'
//import level2 from './level2.js'
//import result from './result.js'

const routes = (
  <Router history=hashHistory>
    <Route path='/' component=Home />
    <Route path='/name' component=Name />
  </Router>
);

export default routes;

不通过导航 /name 呈现的组件

import React,  Component  from 'react'
import appState from './state.js'
import  Router  from 'react-router'

class Name extends Component 
  constructor() 
    super();
    this.state = username: '';
  

  onUpdateUser = (e) => 
    this.appState.username = e.target.value;
    Router.push(
      pathname: '/level'
    )
  

  render() 
    return (
      <div className="row">
        <div claassName="col-md-12">
          <div className="nameBox">
            <form className="form-inline" onSubmit=this.onUpdateUser()>
              <input type="text" className="form-control" placeholder="Desiered Username" onChange=this.onUpdateUser value=this.state.username />
              <button type="submit" className="btn btn-success">Submit</button>
            </form>
          </div>
        </div>
      </div>
    )
  


export default Name

任何帮助将不胜感激！PS索引路由工作正常。

【问题讨论】：

看起来您正在导航到 /level（不存在的路线）而不是 /name。检查浏览器的错误控制台，看看是否收到类似以下错误：“警告：[react-router] 位置“/level”与任何路由不匹配”

杰夫，我认为它只会在按下提交按钮后导航到 /level。我该如何解决这个问题？

更改为 onSubmit=(e) => this.onUpdateUser(e)

我遇到了类似的问题。这对我有帮助 ***.com/a/52651670/10316348

【参考方案1】：

./routes 的路径是什么？您是否有一个包含您为路由放置的代码的 /routes/index.js 文件？

我还建议您使用 browserHistory 而不是 hashHistory 作为“普通”网址，而不使用哈希。更多信息here

对于您的 Name 课程，我建议您使用来自 React Router 的 withRouter 高阶组件。这会在组件内部注入“router”作为道具，因此您可以使用this.props.router.push('/path')。

this.appState 现在实际上什么都不做。您正在导入未被触及的“appState”。现在，您正在 Name 组件中设置“appState”。你不是要使用this.setState( username: e.target.value )?。对于类函数，使用onUpdateUser(e) code 而不是箭头函数也是一种更好的做法。

我还看到<form className="form-inline" onSubmit=this.onUpdateUser()> - 我认为在渲染此组件时当前调用了onUpdateUser。您应该改为使用onSubmit=this.onUpdateUser，以便在触发onSubmit 时调用该函数。或者onSubmit=e => this.onUpdateUser(e)，两者都可以。

你到底想用这段代码实现什么？

---

编辑：

我添加了一个要点，我在其中创建了“介绍 - 设置用户名 - 选择级别 - 休息”流程，而不使用 React Router。 React Router 并不总是必需的，特别是对于您真正想要控制必须显示的视图流的事情。

https://gist.github.com/Alserda/150e6784f96836540b72563c2bf331d0

【讨论】：

非常感谢您的反馈。至于我想要完成什么？我是一个反应菜鸟。这是我的第一个 react 水疗中心，我正在尝试构建一个 where's waldo 游戏。理想情况下，在提交时，用户名存储在状态存储中以供以后使用，然后重定向玩家选择游戏关卡。

不客气！ React 绝对值得学习，一旦你掌握了它就会很有趣。 - 你的 state.js 目前是什么样的？你有我可以研究的某种 Git 存储库吗？我个人将 Redux 用于与应用程序状态相关的问题，但如果你真的刚刚开始，我不会真的建议你这样做，因为我认为学习 React 中的正常“状态”更重要。我可能会建议向上移动该州。如;您有一个 Game.js 组件，其状态包含用户名并决定显示哪个组件（Home/Name/Level）

【参考方案2】：

将此添加到您的索引文件中。您可能需要使用来自react-router 的实际Router。

//Import Dependencies.
import  Router  from 'react-router';

//Import Routes.
import routes from './routes/routes.js';

render(<Router routes=routes />, document.getElementById('root'))

或

使用ReactDom 代替react-dom 而不是render。

import ReactDOM from 'react-dom';

ReactDom.render(<Router routes=routes />, document.getElementById('root'));

【讨论】：

这会导致错误：` Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined at Object.componentWillMount (Router.js:118) 的 Object.createTransitionManager (Router.js:111) 等。 .

【参考方案3】：

要将其与当前版本的 react-router (v4) 一起使用，您需要使用 switch 元素。