使用 React Router V4 重定向到 ReactJS 组件上的服务器路由
Redirect to server route on ReactJS component using React Router V4
我的 React Router V4 路由结构如下:
const isAuthenticated = () => {
let hasToken = localStorage.getItem("jwtToken");
if (hasToken) return true;
return false;
};
const AuthenticatedRoute = ({ component: Component, ...rest }) =>
<Route
{...rest}
render={props =>
isAuthenticated()
? <Component {...props} />
: <I NEED TO REDIRECT FROM HERE TO SERVER PAGE />}
/>;
class App extends Component {
render() {
return (
<BrowserRouter basename="/editor">
<Switch>
<AuthenticatedRoute exact path="/" component={AppNav} />
<AuthenticatedRoute
exact
path="/:module"
component={AppNav}
/>
<AuthenticatedRoute
exact
path="/:module/:screen"
component={AppNav}
/>
<AuthenticatedRoute
exact
path="/:module/:screen/:action"
component={AppNav}
/>
<AuthenticatedRoute
exact
path="/:module/:screen/:action/:id"
component={AppNav}
/>
<Route component={PageNotFoundError} />
</Switch>
</BrowserRouter>
);
}
}
export default App;
如您在代码中所见,如果未通过身份验证,我想重定向到服务器页面。该页面是另一个用于管理用户注册的 React 应用程序,位于服务器中,但位于另一个路由树中:/registration
我尝试过但没有成功的方法:
<Redirect to="//registration' />
windows.location = "/registration"
windows.location.href = "/registration"
<Redirect to="http//registration' />
windows.location = "http://registration"
windows.location.href = "http://registration"
当前应用程序中的所有页面重定向。
解决这个问题的方法是什么?
我是这样实现的:
const AuthenticatedRoute = ({ component: Component, ...rest }) =>
(<Route
{...rest}
render={props =>(
isAuthenticated()
? (<Component {...props} />)
: ( window.location = "http://your_full_url" )
)}
/>);
我有一个带有 React 路由器的 create-react-app 项目,问题是当输入路径 '/path/*' 时,它就像在同一个 React 路由器中一样加载了,即使我有使用配置另一个带有快速服务器的反应项目。
问题是 service worker 在后台 运行,对于 '/' 内的任何路由,它都在使用缓存。
我的解决方案是修改 'registerServiceWorker.js',这样当你在路径内时,你会忽略服务工作者。我没有深入了解服务人员,但这是我使用的代码:
export default function register() {
...
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if(window.location.href.match(/*\/path\/*/)){
// Reload the page and unregister if in path
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else if (isLocalhost) {
...
在路径内时,它会取消订阅 service worker 并重新加载页面。
我的 React Router V4 路由结构如下:
const isAuthenticated = () => {
let hasToken = localStorage.getItem("jwtToken");
if (hasToken) return true;
return false;
};
const AuthenticatedRoute = ({ component: Component, ...rest }) =>
<Route
{...rest}
render={props =>
isAuthenticated()
? <Component {...props} />
: <I NEED TO REDIRECT FROM HERE TO SERVER PAGE />}
/>;
class App extends Component {
render() {
return (
<BrowserRouter basename="/editor">
<Switch>
<AuthenticatedRoute exact path="/" component={AppNav} />
<AuthenticatedRoute
exact
path="/:module"
component={AppNav}
/>
<AuthenticatedRoute
exact
path="/:module/:screen"
component={AppNav}
/>
<AuthenticatedRoute
exact
path="/:module/:screen/:action"
component={AppNav}
/>
<AuthenticatedRoute
exact
path="/:module/:screen/:action/:id"
component={AppNav}
/>
<Route component={PageNotFoundError} />
</Switch>
</BrowserRouter>
);
}
}
export default App;
如您在代码中所见,如果未通过身份验证,我想重定向到服务器页面。该页面是另一个用于管理用户注册的 React 应用程序,位于服务器中,但位于另一个路由树中:/registration
我尝试过但没有成功的方法:
<Redirect to="//registration' />
windows.location = "/registration"
windows.location.href = "/registration"
<Redirect to="http//registration' />
windows.location = "http://registration"
windows.location.href = "http://registration"
当前应用程序中的所有页面重定向。
解决这个问题的方法是什么?
我是这样实现的:
const AuthenticatedRoute = ({ component: Component, ...rest }) =>
(<Route
{...rest}
render={props =>(
isAuthenticated()
? (<Component {...props} />)
: ( window.location = "http://your_full_url" )
)}
/>);
我有一个带有 React 路由器的 create-react-app 项目,问题是当输入路径 '/path/*' 时,它就像在同一个 React 路由器中一样加载了,即使我有使用配置另一个带有快速服务器的反应项目。
问题是 service worker 在后台 运行,对于 '/' 内的任何路由,它都在使用缓存。
我的解决方案是修改 'registerServiceWorker.js',这样当你在路径内时,你会忽略服务工作者。我没有深入了解服务人员,但这是我使用的代码:
export default function register() {
...
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if(window.location.href.match(/*\/path\/*/)){
// Reload the page and unregister if in path
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else if (isLocalhost) {
...
在路径内时,它会取消订阅 service worker 并重新加载页面。