Reactjs React router dom访问页面仅来自应用程序，不来自url

我是一个新的反应，反应和redux

我想知道我是否可以添加一个不能从url访问的路由，只能从应用程序访问。 使用案例是，我正在尝试构建注册表单页面，该页面将在成功注册后向电子邮件发送验证码，应用程序将重定向到该页面以输入验证码。 我正在考虑创建一个新的验证码页面，但该页面不能通过在url中键入来访问，它应该只能通过应用程序访问

---

这是可能的还是我应该采取另一种方法？

在我看来，从URL访问您的“输入验证码”页面不是问题。但是，如果你想这样做，那么是的，这是可以做到的

验证页的呈现组件需要检查某些条件。如果满足该条件，则加载页面。如果没有，它会将

呈现到表单页面

我正在使用一个属性作为该条件。当您在应用程序中导航时，您将通过使用而不仅仅是路径字符串在

组件中传递此属性

<Link to={{ pathname: "/verify", state: { fromApp: true } }}>Verify</Link>

---

我创建了一个非常简单的

你会被重定向。但是你可以通过点击“验证”链接来访问它

完整代码：

import {
  BrowserRouter,
  Link,
  Redirect,
  Route,
  Switch,
  useLocation
} from "react-router-dom";

const Home = () => (
  <div>
    <h1>Home</h1>
    <Link to={{ pathname: "/verify", state: { fromApp: true } }}>Verify</Link>
  </div>
);

const VerificationPage = () => {
  const { state } = useLocation();

  if (!state?.fromApp) {
    return <Redirect to="/" />;
  }

  return (
    <div>
      <h1>Enter Verification Code</h1>
      <input />
      <button>Submit</button>
    </div>
  );
};

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/verify" component={VerificationPage} />
        <Route path="/" component={Home} />
      </Switch>
    </BrowserRouter>
  );
}

导入{
浏览器路由器，
链接
重新使用
路线,，
转换
使用地点
}从“反应路由器dom”；
常量Home=（）=>(
家
验证
);
常量验证页=（）=>{
const{state}=useLocation（）；
如果（！state？.fromApp）{
返回；
}
返回(
输入验证码
提交
);
};
导出默认函数App（）{
返回(
);
}

是的，这是可能的。如果不满足某些条件，则希望此管线的渲染组件渲染。我想在这种情况下，我会使用location.state属性。当您在应用程序中导航时，您将在组件中传递此属性。我不熟悉此位置状态属性。你能提供如何使用它的文档链接吗？

import {
  BrowserRouter,
  Link,
  Redirect,
  Route,
  Switch,
  useLocation
} from "react-router-dom";

const Home = () => (
  <div>
    <h1>Home</h1>
    <Link to={{ pathname: "/verify", state: { fromApp: true } }}>Verify</Link>
  </div>
);

const VerificationPage = () => {
  const { state } = useLocation();

  if (!state?.fromApp) {
    return <Redirect to="/" />;
  }

  return (
    <div>
      <h1>Enter Verification Code</h1>
      <input />
      <button>Submit</button>
    </div>
  );
};

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/verify" component={VerificationPage} />
        <Route path="/" component={Home} />
      </Switch>
    </BrowserRouter>
  );
}