时间戳

首页 > 解决方案 > 当某些路由位于自定义组件内时，反应重定向不起作用

reactjs - 当某些路由位于自定义组件内时，反应重定向不起作用

问题描述

实时预览

我有一个简单的路由stratary。

  1. 对于 /login -> 显示 LoginPageContainer
  2. 对于 /register -> 再次显示 LoginPageContainer
  3. for / -> 重定向到 /login
  4. 对于 * -> 显示 NotFoundPage

如果所有路线都处于同一水平，则一切正常。

      <BrowserRouter>
            <Switch>
                {/*<App />*/}
                <Route path={'/login'} component={LoginPageContainer}/>
                <Route path={'/register'} component={LoginPageContainer}/>
                <Route exact path="/">
                    <Redirect to="/login" />
                </Route>
                <Route path='*' component={NotFoundPage} />
            </Switch>
        </BrowserRouter>

但是如果登录和注册路由在App组件内部，/ 和 * 路由什么也不显示。

索引.js

           <Switch>
                <App />
                {/*<Route path={'/login'} component={LoginPageContainer}/>*/}
                {/*<Route path={'/register'} component={LoginPageContainer}/>*/}
                <Route exact path="/">
                    <Redirect to="/login" />
                </Route>
                <Route path='*' component={NotFoundPage} />
            </Switch>

应用程序.js

render() {
        const { alert } = this.props;
        return (
                <div className="container">
                    <div className="col-sm-8 col-sm-offset-2">
                        <Route path={'/login'} component={LoginPageContainer}/>
                        <Route path={'/register'} component={LoginPageContainer}/>
                    </div>
                </div>
        );
    }

完整代码

index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import { store } from './helpers';
import { App } from './App';
import { configureFakeAPI } from './helpers';
import {BrowserRouter, Switch} from "react-router-dom";
import { Router, Route, Redirect } from 'react-router-dom';
import {NotFoundPage} from "./components/NotFoundPage";
import LoginPageContainer from "./components/LoginPage";
configureFakeAPI();

render(
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <App />
                {/*<Route path={'/login'} component={LoginPageContainer}/>*/}
                {/*<Route path={'/register'} component={LoginPageContainer}/>*/}
                <Route exact path="/">
                    <Redirect to="/login" />
                </Route>
                <Route path='*' component={NotFoundPage} />
            </Switch>
        </BrowserRouter>
    </Provider>,
    document.getElementById('app')
);

应用程序.js

import React from 'react';
import {Router, Route, Switch} from 'react-router-dom';
import { connect } from 'react-redux';
import { PrivateRoute } from './PrivateRoute.js';
import { history } from './helpers';
import { alertActions } from './actions';
import { HomePage } from './components/HomePage';
import LoginPageContainer  from './components/LoginPage';
import { RegisterPage } from './components/RegisterPage';
import './styles.css';
export class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
        });
    }

    render() {
        const { alert } = this.props;
        return (
                <div className="container">
                    <div className="col-sm-8 col-sm-offset-2">
                        <Route path={'/login'} component={LoginPageContainer}/>
                        <Route path={'/register'} component={LoginPageContainer}/>
                    </div>
                </div>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}
export default connect(mapStateToProps)(App);

标签： reactjs

解决方案

我相信您提到的路线没有显示任何内容，因为<Switch/>只期望<Route/>在其中，并且希望将当前位置与这些路线相匹配。但是您正在喂它，<App/>这使它总是返回并停止。

您要么需要将<App/>自身置于<Route/>开关的内部，要么将其置于外部，并且可能将另一个<Switch/>用于组件中的嵌套路由。

推荐阅读