Reactjs 当某些路由位于自定义组件内时，react重定向不起作用

我有一个简单的路线

对于/login->show LoginPageContainer 对于/register->再次显示LoginPageContainer for/->重定向到/login 对于*->显示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

完整代码

index.js

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>

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>
        );
    }

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')
);

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);