时间戳

首页 > 解决方案 > React - 将状态传递给 Route

reactjs - React - 将状态传递给 Route

问题描述

我有一个简单的 React+Hooks webapp，我有一个渲染 componentA 的 route1。在 ComponentA 上，如果满足条件，我可以为该组件呈现正确的 jsx 或重定向到 Route2。在 route2 上，我需要从 route1 呈现的 componentA 中获取一些状态。

组件A.jsx

return (
        <Fragment>
            {!call ? 
                (
                    <div className="container">
                        //some jsx
                    </div>
                )
                : 
                (
                    <Redirect to={{pathname: '/route2', state: { meeting, name }}}/>
                )}
        </Fragment>
);

应用程序.js

const App = () => {

    return(
        <AuthProvider>
            <Router history={history}>
                <Switch>
                    <Route exact path="/route1" component={ComponentA} />
                    <Route exact path="/route2" component={ComponentB} />
                </Switch>
            </Router>
        </AuthProvider>
    );
};

我试图获取props.location.stateComponentB.jsx 上的状态，但它始终未定义。有没有办法将这些参数传递给路由，还是我需要使用 Context 来解决这个问题？

标签： reactjsreact-router

解决方案

您的代码应该可以工作，但是props.location.state除非您通过编程导航专门设置它，否则它将是未定义的。例如，如果您重新加载页面，或通过 URL 导航，或在未设置的情况下导航，它将不存在。您必须在组件中考虑到这一点，并且无论如何到达路由，都应避免将任何需要可用的数据放入其中。在这种情况下，您通常最好将任何共享状态存储在共享父级中App。

这是一个工作示例。它使用它BrowserRouter，因为我无法在片段中正确加载 npmhistory包createBrowserHistory，但它基本上与以这种方式创建历史并将其提供给您的常规相同Router：

const { useState } = React;
const { BrowserRouter, Switch, Route, Redirect } = window.ReactRouterDOM;

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/route1" component={ComponentA} />
        <Route exact path="/route2" component={ComponentB} />
        <Redirect to="/route1" />
      </Switch>
    </BrowserRouter>
  );
};

function ComponentA() {
  const [redirect, set] = useState(false);
  const string = "state preserved";

  return redirect ? (
    <Redirect to={{ pathname: "/route2", state: { string } }} />
  ) : (
    <button onClick={() => set(true)}>Redirect with state</button>
  );
}

function ComponentB(props) {
  return (
    <div>{props.location.state ? props.location.state.string : "no state"}</div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.0.1/react-router-dom.min.js"></script>
<div id="root"></div>

推荐阅读