Маршрутизация с вводом URL (Reactjs) - PullRequest
Новая
       32

Маршрутизация с вводом URL (Reactjs)

0 голосов
/ 03 мая 2020

Я работаю над проектом ReactJs и пытаюсь реализовать маршрутизацию между двумя моими частями приложения (процесс входа в систему и пароль (Первая часть)) и между (Домой и остальной частью приложения).

Проблема в том, что я не могу получить доступ к (Процесс входа в систему и пароль (Первая часть)), когда я набираю url в браузере, но я могу сделать это с (Домой и остальной частью приложения).

Я не знаю, является ли проблема из моего веб-пакета или приложения

здесь кодом индекса. js

function App() {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Auth} />
                <Route path="/home" component={Home} />
            </Switch>
        </Router>
    );
}

здесь логин контейнер 

function AuthContainer() {
    return (
            <section>
                <div className="col-md-3 col-lg-3 col-xl-3 col-sm-3 left-panel">
                    <img src="/public/img/logo_white.svg" />
                </div>
                <div className="col-md-9 col-lg-9 col-xl-9 col-sm-9 right-panel">
                    <div className="content">
                        <Switch>
                            <React.Fragment>
                                <Route path="/" exact component={Login} />
                                <Redirect from="/" to="/login"/>
                                <Route path="/login" component={Login} />
                                <Route path="/identify" component={Identify} />
                                <Route path="/verify" component={Verify} />
                                <Route path="/recover" component={Recover} />
                                <Route path="/not-found" component={NotFound} />
                            </React.Fragment>
                        </Switch>
                    </div>
                </div>
            </section>
    );
}

вот домашний контейнер 

function HomeContainer() {
    return (
        <section>
            <div className="col-md-1 col-lg-1 col-xl-1 col-sm-1 l-panel menu">
                <Menu />
            </div>
            <div className="col-md-11 col-lg-11 col-xl-11 col-sm-11 right-panel">
                <div className="home_content">
                    <div className="header">
                        <Header ClassIs={"header_icon"} />
                    </div>
                    <br />
                    <div className="pContent">
                        <Switch>
                            <Route path="/home/admins" exact component={Admin} />
                            <Route path="/home/admin/ajouter_admin" component={AddAdmin} />
                            <Route path="/home/abonnes" component={Abonne} />
                            <Route path="/home/abonne/:id" component={ProfileAbonne} />
                            <Route path="/home/cours" component={CoursList} />
                            <Route path="/home/cour/:id" component={CoursContent} />
                        </Switch>
                    </div>
                </div>
            </div>
        </section>
    );
}

и вот мой веб-пакет 

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'source-map',
    devServer: {
        host: 'localhost',
        historyApiFallback: true,
        open: true
    },
    module: {...},
    plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })]
};
...