相关疑难解决方法(0)
React-router v4 - 无法获取*url*
我开始使用react-router v4.<Router>我的app.js中有一个简单的导航链接(参见下面的代码).如果我导航到localhost/vocabulary,路由器会将我重定向到正确的页面.但是,当我按下重新加载(F5)之后(localhost/vocabulary)时,所有内容都会消失并且浏览器报告Cannot GET /vocabulary.怎么可能？有人能给我任何线索如何解决(正确重新加载页面)？
App.js:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'
const appContainer = document.getElementById('app')
ReactDOM.render(
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/vocabulary">Vocabulary</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/vocabulary" component={Vocabulary} />
</Switch>
</div>
</Router>,
appContainer)
推荐指数
解决办法
查看次数
在访问时,react-router动态段崩溃
我有一个看起来像这样的路线配置(只显示我认为可能相关的部分):
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, NotFoundRoute } = Router;
var routes = (
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='home' path='/home' handler={HomeHandler}/>
<Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.getElementById('application'));
});
现在,在我的Settings react文件中,我有以下内容:
var Settings = React.createClass({
mixins: [Router.State],
render: function() { ... }
});
如果我访问host.local/settings和日志this.getParams()一切正常,文件呈现Object {tab: undefined}在控制台中显示我.但是一旦我尝试host.local/settings/user- 我希望控制台返回类似的东西Object {tab: 'user'}- 整个事情就会崩溃并开始投入Uncaught SyntaxError: Unexpected token …
推荐指数
解决办法
查看次数
刷新具有动态 url/params 的 React 路由器页面
我有几个使用 React Router 显示的组件，它们具有动态 url 路径。我的一个示例路径是
<Route path="/newproject/:id" onEnter={checkSesh} component= {ProjectDetails} />
输入此组件时，我有一个componentWillMount函数可以提取idurl 的一部分，以便我可以获得正确项目的信息并将其呈现在组件上ProjectDetails。
componentWillMount() {
var id = this.props.router.params.id
this.props.teamDetails(id);
}
this.props.teamDetails(id)这会调用一个 redux 操作创建者，该创建者将向一条快速路线发出 axios 请求，该路线将从数据库中获取项目信息。
export function teamDetails(id) {
return function(dispatch) {
axios.get('/getteaminfo/' + id)
.then(res => {
dispatch({ type: "SET_TEAM_DETAILS", payload: {
teamInfo: res.data.teamInfo,
admin: res.data.admin,
adminID: res.data.teamInfo.teamAdmin,
teamMembers: res.data.teamInfo.teamMembers
}
})
});
}
}
登录后访问页面时一切正常。但是当我刷新页面时/newproject/:id，出现错误Uncaught SyntaxError: Unexpected token <。我的浏览器中的示例网址如下所示http://localhost:3000/newproject/58df1ae6aabc4916206fdaae。当我刷新此页面时，我收到该错误。由于某种原因，错误是抱怨我的<!DOCTYPE html>index.html 最顶部的标签。这个index.html是所有React渲染的地方。
推荐指数
解决办法
查看次数
刷新后React App返回错误
我正在使用React Router v4创建一个React/Redux应用程序.它有一个简单的架构
--RootPage path /
--HomePage path /h
-Gallery path /h/portfolio
-Links path /h/links
-About path /h/about
现在,每次刷新,如果我在二级/ h /组合,或/ h /链接,或/ h/about,这个错误net :: ERR_ABORTED.
如果我在根级别或/ h /级别,刷新工作正常.我已经添加historyApiFallback: true到devServer所以它不是那个问题.每次刷新时都必须始终转到/ root是没有用的.这可能有什么问题？
这是我的路线
const mainRouter=(
<Wrapper>
<Provider store={store} history={history}>
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/h" component={HomePage}/>
</div>
</BrowserRouter>
</Provider>
</Wrapper>
)
并在HomePage
<main>
<Route path={`${this.props.match.path}/portfolio`}
render={ ()=><Gallery {...this.props}/> } />
<Route path={`${this.props.match.path}/about`} render={ ()=><About
{...this.props}/> }/>
<Route path={`${this.props.match.path}/links`} render={ ()=><Links
{...this.props}/> }/>
</main>
推荐指数
解决办法
查看次数