Question

在我的应用顶部，我有以下主要路由器

export class App extends React.Component {

    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route exact path={Paths.login} component={LoginForm} />
                        <Route path={Paths.dashboard} component={Dashboard} />
                    </Switch>
                </Router>
            </div>
        )
    }

}

在仪表板中，我还有一个带有链接的侧面菜单

export class Dashboard extends React.Component<RouteComponentProps> {

    constructor(props: RouteComponentProps) {
        super(props)
        this.handleLogoutClick = this.handleLogoutClick.bind(this)
    }

    handleLogoutClick() {
        UserRepository.logout()
        this.props.history.push(Paths.login)
    }

    render() {
        return UserRepository.isLoggedIn() ? (
            <div>
                <BrowserRouter>
                    <div id="menu">
                        <div className="title">Dashbaord</div>
                        <Nav className="flex-column" defaultActiveKey>
                            <Link to={`${this.props.match.path}/users`}>Users</Link>
                            <Nav.Link onClick={this.handleLogoutClick}>Logout</Nav.Link>
                        </Nav>
                    </div>
                    <div id="content">

                        <Switch>
                            <Route path={`${this.props.match.path}/users`} component={Users} />
                        </Switch>
                    </div>
                </BrowserRouter>

            </div>

        ) : Paths.redirectToLogin()
    }

}

当我进入dashbaord并单击用户链接时，它会起作用，但是，如果我使用相同的网址刷新页面，则它将显示空白页面。关于如何直接进入子路线的任何解决方案？

我对js反应非常陌生，请立即学习。我发现调试此路由选择非常困难，您不会收到任何错误或提示发生了什么问题！

webpack配置文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const distDir = path.resolve(__dirname, 'dist')

module.exports = {
    entry: [
        "./src/index.tsx"
    ],
    mode: 'development',
    output: {
        filename: "main.js",
        path: distDir
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'babel-loader',
                exclude: /node_module/
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin(
            {
                title: 'Dashboard',
                template: 'index.html'
            }
        ),
        new MiniCssExtractPlugin()
    ],
    devServer: {
        contentBase: distDir,
        historyApiFallback: {
            index: 'index.html'
        },
        hot: true
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

Answer 1

只需尝试使用此代码重新安装react-router-dom，就可以为我工作。我的猜测是字符串已关闭，或者存在其他阻止页面加载的库或功能。

如果您使用yarn start在本地运行此路由，则路由应处理加载。

可能的错误：

如果您在生产环境中使用此代码，构建react应用并仅加载构建（html＆js），则仍需要配置nginx或http服务器以将所有路由指向单个{ {1}}文件，否则您的http服务器可能只是寻找一个不存在的文件夹，并在页面刷新时显示空白页面。

以下是对我有用的代码：

文件： index.html

App.tsx

文件： import React from 'react'; import { BrowserRouter, Route, Switch } from "react-router-dom"; import Dashboard from './Dashboard' class App extends React.Component { render () { return ( <div> <BrowserRouter> <Switch> <Route exact path={'/login'} render={() => <h1>Login</h1>} /> <Route path={'/dashboard'} component={Dashboard} /> </Switch> </BrowserRouter> </div> ) } } export default App;

Dashboard.tsx

反应路由器：直接转到子路径不起作用

1 个答案: