我正在与一起玩，react并redux尝试与建立一个基本应用react-routes。目前，我已经设法将以下内容组合在一起，这些内容适用于Wrapper和Home页面，但是如果我转到localhost：8080 / apps，“应用程序”页面似乎无法加载。我每次都得到404。
有什么想法我可能在这里出错了吗？
控制台中没有错误或警告，我尝试过在线浏览几个示例，但是这些示例似乎与我的并没有特别的不同，
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import Routes from './routes/routes';
import { configureStore } from './store/configureStore';
const rootElem = document.getElementById('mount');
const store = configureStore(browserHistory);
const history = syncHistoryWithStore(browserHistory, store);
const provider = <Provider store={store}><Routes history={history} /></Provider>;
ReactDOM.render(provider, rootElem);
路线/routes.js
import React from 'react';
import …我正在尝试使用自定义对话框询问用户确认,然后导航未保存的数据.
按照我的文档:
componentDidMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
}
而不是
routerWillLeave(nextLocation) {
if (!this.props.pristine) {
return 'You have unsaved information, are you sure you want to leave this page?'
}
我有
routerWillLeave(nextLocation) {
if (!this.props.pristine) {
this.setState({open: true})
this.forceUpdatate() //necessary or else render won't be called to open dialog
}
我使用的对话框组件来自材料的UI刚刚期望一个open布尔值来控制对话框,这还需要handleCancel和handleContinue方法,但我不知道如何与它挂起来routerWillLeave.
该handleCancel方法很简单,只需关闭对话框:
handleCancel() {
this.setState({open: false})
};
我已将对话框组件包装在名为的组件中 Notification
export default class Notification extends React.Component { …我正在使用来自react-router-link的链接组件,它将蓝色css应用于文本,就像锚标签一样.我想将其更改为白色,我该怎么做？
onHover我想把它改成蓝色.
我最近开始学习React/Redux,现在我正在尝试构建一个小的单页面应用程序.
最近我遇到了一个我不理解但无法修复的问题.
我来告诉你代码:
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import App from './components/App'
import Home from './components/Home'
import About from './components/About'
const reducer = (state = {}, action) => {
return state
}
const store = createStore(
combineReducers({
reducer,
routing: routerReducer
})
)
const history = syncHistoryWithStore(hashHistory, store) …我在使用react-router 2.x配置（特别是应用程序基本名称）时有些挣扎。
我有一个应用程序，在其整个生命周期中可能具有不同的基本根。例如：
/ 开发中/users 在生产中/account 迁移后投入生产基本名称在以下几个地方起作用：
redirectUrlAPI的调用我当前的解决方案是拥有一个ENV变量，并window.defs通过Express服务器进行注入，使其既可用于Webpack，也可用于应用程序本身，但最终仍然会${defs.APP_BASENAME}/signin在整个应用程序中出现太多问题。
如何提取应用程序库，或者至少将其存放在单个位置？我应该能够在Router的配置中指定基本路由，然后以某种方式简单地使用相对路由，对吗？还是我错过了什么？
我有一个支持每个用户特权的应用程序。因此，如果用户必须获得适当的许可，他就可以管理用户，组等。如果用户没有这样的许可，他可能不会这样做。
我有一个rest api，带有一个端点，返回当前用户的所有允许的链接，并且我想为此设置路由react-router。如果权限被编辑，例如，用户放开了编辑用户的权限，则相应的菜单项应从菜单中消失，而路由将从路由器中删除。否则，应添加菜单项和路线。
现在我有这个设置：
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={Window}>
<IndexRoute component={Users} />
<Route path="users" component={Users} />
<Route path="groups" component={Groups} />
<Route path="permissions" component={Permissions} />
<Route path="*" component={Error} />
</Route>
</Router>
</Provider>, mount);
但我真正希望拥有的是：一个动态执行此设置并可以在每次更改权限时运行的函数。
我找不到关于此的任何文档，如果能做到这一点，我将感到高兴。
更新
根据给出的答案和评论，我意识到我想解决这个问题的方法并不符合react-router的声明性。
我在redux应用程序中使用react-router-dom.
这是我在index.js中的初始设置:
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
然后在我的App.js中我有:
render() {
return (
<div className="App">
<Route exact path="/" render={ () => {
return (
<div>
{
this.props.categories.map((category)=>{
console.log('category', category)
return (
<Link key={category.name} to="/category" >{category.name}</Link>
)
})
}
</div>
)
}}
/>
<Route path="/category" render={ () => {
console.log('category path this.props', this.props)
return (<p>Category is whatever</p>)
}}
/>
</div>
);
}
我认为每当我点击显示的任何链接时,浏览器会自动知道如何呈现新的路径路径/类别,但由于某种原因它不会.
我究竟做错了什么？
我正在尝试在一个较早的线程中解决该问题，该问题通常是如何重置Redux存储状态的？-用户注销时需要重新初始化/使整个Redux存储无效。
但是，就我而言，仍然缺少一些东西。我将Redux与ConnectedRouter结合使用，并且尝试执行以下操作。
将rootReducer定义为：
export default history =>
combineReducers({
router: connectRouter(history),
user,
manager,
vendor
// rest of your reducers
});
然后，我configureStore将上面的内容导入为createRootReducer：
const configureStore = (initialState = {}, history) => {
let composeEnhancers = compose;
const composeWithDevToolsExtension =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
const enhancers = [];
const middleware = [sagaMiddleware, thunk, routerMiddleware(history)];
if (typeof composeWithDevToolsExtension === 'function') {
composeEnhancers = composeWithDevToolsExtension;
}
const store = createStore(
createRootReducer(history), // root reducer with router state
initialState,
composeEnhancers(applyMiddleware(...middleware), ...enhancers)
);
store.runSaga = …https://reacttraining.com/react-router/web/example/auth-workflow
我在 react-router-dom 文档中实现了私有路由
function PrivateRoute({ authenticated, ownProps }) {
let {component:Component, ...rest} = ownProps
//PrivateRoute, If not authenicated ie false, redirect
return (
<Route
// JSX Spread sttributes to get path for Route
{...rest}
render={() => authenticated ? (
<Component />
) :
<Redirect
to={{pathname: "/" }}
/>
}
/>
);
}
export default PrivateRoute
PrivateRoute 是一个从 Redux-Store 获取身份验证状态的连接组件。
我正在尝试使用 redux-mock-store 和从酶安装来测试连接的组件。
import configureStore from 'redux-mock-store'
const mockStore = configureStore()
const authStateTrue = {auth: {AUTHENTICATED: true}};
test('Private path renders …reactjs react-router react-router-redux react-router-v4 react-router-dom
我正在开发一个带有 React 路由器的 React 应用程序，其中的服务器托管 React 应用程序本身和 REST API。路由器是来自react-router-redux的ConnectedRouter。据我了解，一旦您在浏览器中打开应用程序，对 URL 的任何更改都不会从服务器请求，而是在 React 路由器中处理客户端，即使您重新加载页面或手动在地址栏中写入一些内容。
首次打开应用程序时，实际的 HTML、JS 和 CSS 文件是从 Web 服务器加载的，该服务器配置为仅在用户获得授权时才提供服务。这样，服务器可以将用户重定向到第三方身份验证站点，或者在用户通过身份验证但未授权时提供 401 消息。但是，当用户会话过期、用户注销或用户权限发生更改而不再被授权打开应用程序时，就会出现问题。然后，当用户在之前缓存过该应用程序的浏览器上打开该应用程序时，它似乎可以正常打开，但会出现很多错误，因为每个 API 调用现在都会失败。
为了解决这个问题，我想，当API调用失败时，告诉用户重新加载页面，以便向服务器发出请求以获取应用程序（index.html等），以便他被重定向到第三个当事人认证网站。然而，常规的浏览器重新加载（F5）并不能解决问题。该请求被react-router吞下，并且永远不会到达服务器。window.location.reload() 也是如此。硬重新加载，即 Ctrl+F5 似乎可以解决问题，至少在 Chrome 中是这样，但有些用户可能不明白这一点。因此，我想向用户展示一个“硬重新加载”按钮，暂时告诉react-router产生url请求，以便它们可以传递到服务器并尝试获取index.html。
所以我的问题是：如何暂时以编程方式强制客户端应用程序允许 URL 请求正常发送到服务器，而不是在 React-router 中自行处理它们？
或者，如果这是不可能的，我如何以编程方式从浏览器的内存中清除应用程序，以便它被迫再次请求服务器？
编辑：我认为请求被反应路由器吞掉的假设是错误的。它是 create-react-app 框架中的 Service Worker。服务工作者公开了一个注销函数来解决我的问题。
javascript reactjs react-router react-router-redux create-react-app