Reactjs 使用React路由器时在何处存储全局作用域

在使用React时仍然是新手。我正在使用React Router制作我的第一个应用程序，并试图更倾向于使用本地状态，避免在全局范围内有很多元素

但是，我需要一些，我不确定应该在哪里插入“全球”状态，或者这里的最佳实践是什么。过去我总是将其放在App.js中，但使用React Router 4我甚至不渲染，因为我的index.js文件如下所示：

ReactDOM.render(<Routes />, document.getElementById('root'))

ReactDOM.render（，document.getElementById（'root'））

---

全球范围是否应该仅存在于路由中？只是寻找最佳实践建议

您应该使用store。这就是您实现它的方式

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import promise from 'redux-promise';
import rootReducer from "../reducers/root";
import Root from '../config/root';

let store = createStore(rootReducer, compose(
    applyMiddleware(promise),
    window.devToolsExtension ? window.devToolsExtension() : f => f
));

ReactDOM.render(
    <Root store={store} />
    ,document.getElementById('root')
);\

import React from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';

import Index from '../components/index';
import Login from '../components/login';
import Signup from '../components/signup';

const Root = ({ store }) => {
    return(
        <Provider store={store}>
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Index}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/signup" component={Signup}/>
                </div>
            </BrowserRouter>
        </Provider>
    );
};

Root.propTypes = {
    store: PropTypes.object.isRequired
};

export default Root;

从“React”导入React；
从“react dom”导入react dom；
从'redux'导入{createStore，applyMiddleware，compose}；
从“redux承诺”进口承诺；
从“./reducers/root”导入rootReducer；
从“../config/Root”导入根目录；
let store=createStore（rootReducer，compose(
applyMiddleware（承诺），
window.devToolsExtension？window.devToolsExtension（）：f=>f
));
ReactDOM.render(
，document.getElementById（'root'））
);\

Root.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import promise from 'redux-promise';
import rootReducer from "../reducers/root";
import Root from '../config/root';

let store = createStore(rootReducer, compose(
    applyMiddleware(promise),
    window.devToolsExtension ? window.devToolsExtension() : f => f
));

ReactDOM.render(
    <Root store={store} />
    ,document.getElementById('root')
);\

import React from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';

import Index from '../components/index';
import Login from '../components/login';
import Signup from '../components/signup';

const Root = ({ store }) => {
    return(
        <Provider store={store}>
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Index}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/signup" component={Signup}/>
                </div>
            </BrowserRouter>
        </Provider>
    );
};

Root.propTypes = {
    store: PropTypes.object.isRequired
};

export default Root;

从“React”导入React；
从“react router dom”导入{Route，BrowserRouter}；
从'react redux'导入{Provider}；
从“道具类型”导入道具类型；
从“../components/Index”导入索引；
从“../components/Login”导入登录名；
从“../components/Signup”导入注册；
常量根=（{store}）=>{
返回(
);
};
Root.propTypes={
存储：PropTypes.object.isRequired
};
导出默认根目录；

我想我不太明白你的意思。你能再解释一下你的问题吗？是的，对不起。我希望有一些变量处于“全局状态”（这意味着它们可以从应用程序中的任何位置访问，并且可以轻松地传递给组件）。在过去，我总是将这种状态放在应用程序组件中。然而，现在我正在使用React路由器，我甚至不渲染应用程序组件，而是渲染组件。我想知道我是否应该向路由组件添加一个全局状态，因为这就是渲染的内容，或者是否有其他地方保存全局状态是有意义的。谢谢！我并不反对使用Redux，我也不确定我是否完全理解它与常规React相比的用途。当使用像这样的Redux商店时，我是想把所有东西都放在商店里，还是我仍然可以使用一堆本地州，仅仅使用商店来存储高价值的数据？如果你想提高你的技能，我强烈建议你观看Stephen Grinder的《现代反应与Redux》。你可以在我的网站上找到他的课程。你可以有当地的州，也可以有商店。开发人员使用本地状态进行简单的ui更改，如切换手风琴、导航栏等。不过，您可以创建

actions/ui.js

和

reducer/ui.js

来管理存储中的ui状态。所以，你也可以在商店里切换手风琴。如果你认为这是你问题的答案，请在我的答案上打勾。