反应路由器不会在路由更改时渲染组件

Question

On initial load of the application it will render the correct component corresponding to the URL However, but when I change click on link, it render nothing.

index.tsx:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store/store';
import { App } from './components/app/App';
import { BrowserRouter } from 'react-router-dom';



render(

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

Mye file app.tsx where I put my routers: This is what I'm intending the routes components to look like.

import React from 'react';
import { Router, Route, Switch, Redirect, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom';
import { history } from '../../utils/helpers';
import { alertActions } from '../../store/actions'
import { PrivateRoute } from '../../routes';
import { Home, Login } from './components/';

interface AProps {
    alert: {
        message: string,
        type: string
    },
    clearAlerts: () => { type: string }
}

class App extends React.Component<AProps> {
    constructor(props: AProps) {
        super(props);

        history.listen((data) => {
            console.log(data);
            // clear alert on location change
            this.props.clearAlerts();
        });
    }

    render() {
        const { alert } = this.props;
        return (
            <Router history={history}>
                <div className="jumbotron">
                    <div className="container">
                        <div className="col-sm-8 col-sm-offset-2">
                            {alert.message &&
                                <div className={`alert ${alert.type}`}>{alert.message}</div>
                            }
                            <Link to="/login">Login</Link>
                            <Switch>
                                <Route path="/login" component={Login} />
                                {/* <PrivateRoute path="/" component={Home} /> */}
                                {/* <Redirect from="*" to="/" /> */}
                            </Switch>
                        </div>
                    </div>
                </div>
            </Router>
        );
    }
}

function mapState(state: any) {
    const { alert } = state;
    return { alert };
}

const actionCreators = {
    clearAlerts: alertActions.clear
};

const connectedApp = withRouter(connect(mapState, actionCreators)(App));
export { connectedApp as App };

s there something I'm missing to get components to render clicking Link? I'm not getting any console errors or anything telling me there's an issue. So not sure if components are not wrapped correctly or what may be causing the issue.

Answer 1

Change this:

<Route path="/login" component={Login} />

to this:

<Route exact path="/login" component={Login} />

Answer 2

You are using 2 Routers at the same time. One inside index file, another inside app file. You might want to remove one of them.

For example, only leave one inside index :

<Router history={history}>
    <App />
</Router>