ReactJS 保护路由和嵌套路由答案

【问题标题】：ReactJS protected routes and nested routesReactJS 保护路由和嵌套路由
【发布时间】：2019-08-13 07:25:58
【问题描述】：

我在ReactJS 中的路线有问题。我定义了一些这样的路线：

...Import / Class...
class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/signup" component={Signup} />
                    <ProtectedRoute path="/user/contact" component={Contact} />
                    <ProtectedRoute path="/user/person" component={UserPerson} />
                    <ProtectedRoute path="/user/profile" component={Profile} />
                    <Route component={NotFound} />
                </Switch>
                <Footer />
            </div>
        );
    }
}
...Export...

下面你可以看到我的ProtectedRouteclass

...Import / Class...
const ProtectedRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        AuthGestion.userIsAuthenticated() ? (
            <Component {...props} />
        ) : (
            <Redirect to={{
                pathname: '/login',
                state: { from: props.location }
            }}/>
        )
    )} />
);
...Export...

当我使用<NavLink to="/user/person"></NavLink> 转到我的页面时，没有问题，我的组件已加载，我可以看到我的页面。但是，当我直接转到网址/user/person，并为我的页面充值（CTRL + F5）时，我进入了Console 错误SyntaxError: expected expression, got '<' 和一个白页。只是用户路线不起作用。

我在我的服务器信息下方添加：

import path from 'path';
import bodyParser from 'body-parser';
import express from 'express';
import mongoose from 'mongoose';
import routes from './routes/index.route';
import config from '../../config/config';

import webpack from 'webpack';
import webpackConfig from '../../config/webpack.config.dev';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

//Connexion MongoDB
mongoose.connect(config.mongodbUri, { useNewUrlParser: true });
mongoose.connection.on('connected', () => { console.log('MongoDB connecté'); });
mongoose.connection.on('error', (error) => { console.log(error); });

//Lancement serveur express
const server = express();

//Express need
server.use(bodyParser.json());
server.use(express.static(config.publicPath));
server.use(express.static(config.distPath));

//Hot reload
if(config.isDevMode) {
    const webpackCompiler = webpack(webpackConfig);
    server.use(webpackDevMiddleware(webpackCompiler, {}));
    server.use(webpackHotMiddleware(webpackCompiler));
}

// Route vers l'API
server.use('/api', routes);

// Landing page
server.get('/*', (req, res) => {
    res.sendFile(path.join(config.publicPath, '/index.html'));
});

//Ecoute du serveur
server.listen(config.port, () => {
    console.log(`App here : http://${config.host}:${config.port}`);
});

export default server;

你能帮我理解这个问题吗？如果它不好，也许更正我的路由。

【问题讨论】：

听起来您的服务器在内部路由上返回了错误的有效负载，如果您的应用正在客户端管理路由，这意味着从服务器请求的所有路由都应该为客户端代码提供服务。你能分享一下你的服务器吗？
我添加了我的服务器信息。这就是你想要的？
您是在 api 请求上还是在 html 页面本身上收到此错误？
我的 API 没有任何错误，我在控制台的前端，在 html 页面本身上收到了这个错误。我暂时没有在 user/contact、user/person、user/profile 3 个组件中调用我的 API
可能和stackoverflow.com/a/37949474/11129751一样

标签： node.js reactjs react-router react-router-dom

【解决方案1】：

供日后参考：https://stackoverflow.com/a/37949474/11129751

我有一个没有任何快递的 react/react-router 页面，并得到了同样的错误：SyntaxError：预期的表达式，得到 '

经过一些试验，我发现在我的 index.html 中是一个 js 文件的链接：

所以，解决方案是在源路径中添加/：

并且错误有走了。

希望能有所帮助。

【讨论】：