我正在使用 React Router v4，我的客户想要一个特定的功能，在现有页面的 url 末尾添加“/signup”会导致出现一个注册覆盖，要求提供访问者的联系信息。在覆盖层中填写表单后，访问者将被重定向到原始 url 的内容。如果精明的访问者通过删除“/signup” URL 来解决这个问题，那也没关系。
我的问题是：我如何做到这一点？我什至应该使用路径道具来检查网址吗？
我预见的一个问题是我无法预测所有潜在的 URL 和结构。我需要能够采用任何可以嵌套到 N 度的任意 URL。以下是出现叠加层的情况：
<Route path="/home/signup" render={({match}) => (
<SomeOverlayForm />
)}>
<Route path="/home/xx/signup" render={({match}) => (
<SomeOverlayForm />
)}>
<Route path="/home/xx/yy/signup" render={({match}) => (
<SomeOverlayForm />
)}>
<Route path="/other/signup" render={({match}) => (
<SomeOverlayForm />
)}>
我试图查看在 params 中使用 regexp 是否可以解决我的问题，但我认为不是，因为 regex 似乎只检查有问题的特定参数，并没有解决最初讨论的任意问题URL 中正斜杠的数量（即不同程度嵌套的路径）。见下文：
<Route path="home/:someParam(/\/signup$/"} component={UserProfilePage} />
我很困惑。因此，不仅希望获得有关技术解决方案的指导，还希望获得有关如何思考问题/需求的指导。我也愿意稍微修改实现。例如，我愿意使用 '?signup=true' 而不是 '/signup'。但是应该将事物放在URL末尾的要求保持不变。
我是 React 开发的新手，我不确定如何处理这个问题。
我有一个带有路由的简单应用程序，它看起来像这样：
<Router>
<div>
<Route path="/" component={MainComponent} />
<Route path="/dashboard" component={DashboardComponent} />
<Route path="/users" component={UsersComponent} />
<Route path="/admin" component={AdminComponent} />
</div>
</Router>
当我MainComponent按预期访问 localhost:3000/myApp/index.html 我的加载时，它包含站点的主要布局、导航等。
然后我必须点击“仪表板”切换到DashboardComponent“用户”移动到UsersComponent“管理员”加载AdminComponent，这些加载在导航旁边MainComponent。
所以它是这样的：
localhost:3000/myApp = MainComponent
localhost:3000/dashboard = MainComponent + DashboardComponent
localhost:3000/users = MainComponent + UsersComponent
localhost:3000/admin = MainComponent + AdminComponent
我想要实现的是永远不要MainComponent单独加载（因为它除了导航之外什么都没有），而是用它加载 DashboardComponent，所以一切都会像以前一样工作，稍作改动：
localhost:3000/myApp = MainComponent + DashboardComponent
所以我想我想加载我的 MainComponent，然后在 init 上加载仪表板。如果 URL 也从 index.html 自动更改为 /dashboard，那就太好了。
我尝试在 MainComponent.jsx 中做这样的事情：
componentWillMount() { …所以我希望 IIS 在请求某些 url 时基本上不做任何事情，因为我想要从服务器端呈现的反应路由器来处理请求。
用过这个 链接
我创建了一个检查每个请求的中间件。现在我不知道如何在找到正确的网址后忽略或中止此请求。
public class IgnoreRouteMiddleware
{
private readonly RequestDelegate next;
// You can inject a dependency here that gives you access
// to your ignored route configuration.
public IgnoreRouteMiddleware(RequestDelegate next)
{
this.next = next;
}
public async Task Invoke(HttpContext context)
{
if (context.Request.Path.HasValue &&
context.Request.Path.Value!="/")
{
// cant stop anything here. Want to abort to ignore this request
}
await next.Invoke(context);
}
}
我想为我的下一页传递多个状态，我正在从另一个页面重定向。
一个我已经通过了，而且工作正常。
<Link to ={{pathname: "/CreateEventUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket } }} >
<button type="button" className="btn btn-danger">Create an Event</button>
</Link>
现在我必须通过两个状态。它的语法是什么？
<Link to ={{pathname: "/EventDetailsUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, eventId: event.id}}} >
我目前正在使用React和实现身份验证/登录流程React Router V4。但我正在努力寻找一个有效的重定向“模式”来实现我的想法。
情况如下：
我目前的实现：
入口组件
export default class Entry extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<Routes />
</Router>
);
}
}
路由组件（在这里进行身份验证检查）
class Routes extends PureComponent {
componentDidMount() {
this.props.loadUser(); // async method (redux) loads the actual logged in user
}
render() {
return (
<Switch>
<Route path="/login" render={() => (!this.props.user.username ? <LoginPage {...this.props}/> : <Redirect to="/app" />)} />
<Route path="/app" render={() => …以下路线效果很好，并显示了 AdministratePage 组件：
<Route path="/admin" component={AdministratePage} />
然而这条路线：
<Route path="/admin/all" component={AdministratePage} />
...导致以下错误：
我哪里出错了？我不允许使用任何路径吗？
我正在使用 react-router-dom 4.1.2。
我的 webpack.config.js ：
output: {
path: path.resolve('dist'),
filename: '/bundle.js'
},
我的 index.html：
<div id="app"></div>
谢谢你。
这是一个快速的问题，但到目前为止我还没有找到解决方案：
我想使用render方法使用react-router v4访问URL参数。到目前为止，我发现的所有内容都只是通过了这样的组件：
<Route path="/:id" component={Child} />
但是我想使用如下的render方法：
<Route path="/:id" render={() => (<Wrapper> <Child /> </Wrapper>)} />
但是，match当我尝试在组件中访问id参数时，prop是未定义的。props.match.params.idChild
知道如何使用渲染功能并仍然访问url参数吗？
我有一个称为Dashboard的父组件，该组件被渲染为Route，如下所示：
const Routes = ({ authenticated }: { authenticated: boolean }) => (
<Switch>
<AuthenticatedRoute path="/home" exact={true} component={Dashboard} authenticated={authenticated} />
<UnauthenticatedRoute path="/login" exact={true} component={Login} authenticated={authenticated} />
<AuthenticatedRoute path="/onboarding" exact={true} component={Onboarding} authenticated={authenticated} />
<AuthenticatedRoute path="/meets" exact={true} component={Meets} authenticated={authenticated} />
<Route component={NotFound} />
</Switch>
)
export default Routes
在Dashboard组件中，我还要呈现路线，该组件如下所示：
class Dashboard extends React.Component<IProps, {}> {
public render() {
return (
<div>
<Navigation />
<Route exact={true} path="/home" component={Home} />
<Route exact={true} path="/home/profile" component={Profile} />
<Route exact={true} path="/home/messages" component={Messages} />
HALLO
</div>
)
} …了解React Router时，我注意到从路由a切换到b时，组件将返回其初始状态。
为什么在同一路线上再次点击（即从a到a）时却没有发生同样的事情？
我如何实现一种方法，在该路径上单击<NavLink/>组件会恢复到其原始状态-应该/可以在onChangeReact Router 的钩子上完成吗？
如果这是一种反模式，请向我说明如何完成以下工作：我不仅需要在切换路线时而且在用户选择再次单击同一条路线时，都需要将组件恢复为原始状态。。
下面是问题的抽象：
单击Cat <p/>标签应将其颜色更改为green，单击同一路线<NavLink to="/cat-view">cat</NavLink>应将cat颜色状态恢复为初始状态。即color: false
就像从路线a切换到路线b（在我的情况下是猫到狗）一样
// Cat Component
import React, { useState } from "react";
export const Cat = () => {
const [color, setColor] = useState(false);
function ChangeColor() {
setColor(true);
}
console.log(color)
return (
<p onClick={ChangeColor}>
Click on this <span className={color ? "green" : " "}>Cat</span>
</p>
);
}; …react-router-v4 ×10
react-router ×8
reactjs ×8
javascript ×4
asp.net-core ×1
dialog ×1
reactjs.net ×1
url ×1