Question

我是新来的路由器响应者，我无法使其正常工作。我正在构建一个SPA，该SPA的框架带有页眉，侧边栏和页脚，并且中心视图应该根据所选路径进行更改。

自上而下的DOM层次结构如下：

index.js

render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

App.jsx

render() {
    return (
        <div >
            <Router history={history}>
                <div>
                    <PrivateRoute exact path="/" component={DashboardLayout} />
                    <Route path="/#/login" component={LoginForm} />
                </div>
            </Router>
        </div >
    );
}

Dashboard.jsx

render() {
    if (this.state.toLogin === true) {
        return <Redirect to={{ pathname: '/#/login', state: { from: this.props.location } }} />
    }
    return (
        <div className="app">
            <AppHeader fixed>
                <DefaultHeader/>
            </AppHeader>
            <div className="app-body">
                <AppSidebar fixed display="lg">
                    <AppSidebarHeader />
                    <AppSidebarForm />

                    <AppSidebarFooter />
                    <AppSidebarMinimizer />
                </AppSidebar>
                <main className="main">
                    <Container fluid>
                        <Switch>
                            <Route path="/#/items" name="Items" component={ItemsTable} />
                            <Route path="/#/profile" name="Profile" component={ProfileManager} />
                            <Redirect from="/" to="/#/items" />
                        </Switch>
                    </Container>
                </main>
            </div>
            <AppFooter>
                <DefaultFooter />
            </AppFooter>
        </div>
    );
}

PrivateRoute组件只是在检查用户是否已经登录，并最终重定向到登录表单。

登录后，我希望会在中心视图（由Container包裹）ItemTables视图中看到，但这没有发生。

此外，如果手动导航到/＃/ items或/＃/ profile（通过在浏览器中输入路径或在UI中单击），则容器中的中心视图不会更改。

我确实收到一条错误消息：

Warning: You tried to redirect to the same route you're currently on: "/"

一直以来，我都怀疑这是有关系的。

最后我正在使用Redux。

在此先感谢您的帮助。

如有需要，我可以提供更多详细信息。

Answer 1

将它们包装在Switch而不是div中：

 loginBtn.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
   String Email = emailEdt.getText().toString();
   String Password = passwordEdt.getText().toString();
   LoginRequest loginRequest = new LoginRequest(Email, Password, 
   new Response.Listener<String>() {
    @Override
      public void onResponse(String response) {
      try {
     JSONObject jsonResponse = new JSONObject(response);
     Log.d(TAG, jsonResponse.getString("SUCCESS"));
     boolean success = jsonResponse.getBoolean("SUCCESS");                            
    if (success) 
    {
   Intent intent = new Intent (LoginActivity.this,MainActivity.class);
    startActivity(intent);
    Toast.makeText(LoginActivity.this, "Login  Successful", 
   Toast.LENGTH_SHORT).show();}            
    else {
    AlertDialog.Builder builder = new 
     AlertDialog.Builder(LoginActivity.this);
     builder.setMessage("Login Failed").setNegativeButton("Retry", null)
    .create().show();             
     }
     } 
   catch (JSONException e) 
   {  e.printStackTrace();}}
    });
    RequestQueue queue = Volley.newRequestQueue(LoginActivity.this);
   queue.add(loginRequest);

        }
    });

当您使用其他<Router history={history}> <Switch> <PrivateRoute exact path="/" component={DashboardLayout} /> <Route path="/#/login" component={LoginForm} /> </Switch> </Router>重定向到同一路径时，必须拥有#url。并且您已经拥有了它。绝对正确。在重定向到同一路径但使用其他exact path="/"时，请确保其他路由也使用正确的路径。

Switch和一堆只用div包装起来的路由有何不同？

#hashurl，/path，/:alias，并且没有路径道具将渲染所有组件，因为它们与位置路径匹配。

但是使用Switch时，请确保不要全部包含它们。只需匹配与位置路径匹配的路线即可。

此外，您使用的路径没有像/path#hashurl这样的斜杠，并且要与之匹配，您需要将path="/#/items"和strict道具放在一起。

示例：

exact

否则，您可能必须使用带斜杠的路径：

<Route exact strict strict path="/#/items"

Answer 2

用给定的代码重现您的问题要困难一些。如果您可以创建一个很棒的沙箱。无论如何，我用hashrouter创建了一个沙箱。我想提及的一件事是，您不必在路线上提及＃。

例如

<Switch>
  <PrivateRoute exact path="/" component={DashboardLayout} />
  <Route path="/#/login" component={LoginForm} />
</Switch>

可以是：

<Switch>
  <PrivateRoute exact path="/" component={DashboardLayout} />
  <Route path="/login" component={LoginForm} />
</Switch>

散列用作在静态Web应用程序中查找应用程序路径的参考。

如果需要，可以在Browserrouter中使用react router

这是我从另一个示例中分叉的一个有效示例。我在其中添加了hashrouter，希望对您有所帮助。

请查找如何使用<switch>包装每条路线
并在示例中找到如何实现诸如名册之类的嵌套路由

链接：https://codesandbox.io/s/25okp1mny

引荐来源：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

React Router无法正常工作，并警告：您尝试重定向到当前正在使用的同一路由：“ /”

2 个答案: