Question

我在管理面板上工作，所以我决定不再重复自己，并使用以下代码制作了一个名为Admin.js的文件：

     <div className="admin-page">
       <div className="admin-bar">
          <ul>
             <li><NavLink to="/admin" activeClassName="is-active" exact> Dashboard </NavLink></li>
             <li><NavLink to="/admin/movies" activeClassName="is-active"> Movies </NavLink></li>
             <li><NavLink to="/admin/series" activeClassName="is-active"> Series </NavLink></li>
         </ul>
      </div>
      <div className="admin-content">{this.props.renderData}</div>
    </div>

然后添加了其他页面，例如（AdminMovies.js）：

const content = (
    <React.Fragment>
        <Link to="/"> Add a New Movie </Link>
        hello
    </React.Fragment>
)

const AdminMovies = () => (
    <AdminTemplate renderData={content} />
)

当我通过导航进入它时，它工作得很好，它可以完美呈现，但是当我尝试通过url访问它时，它给我错误

无法获取/ admin / movies

我不知道为什么。

路线树：

    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route path="/" component={Dashboard} exact />
                <Route path="/admin" component={AdminDashboard} exact />
                <Route path="/admin/movies" component={AdminMovies} />
                <Route path="/admin/series" component={AdminSeries} />
                <Route component={NotFound} />
            </Switch>
        </div>
    </BrowserRouter>

Answer 1

这是因为您可能没有设置server-side routing。

在加载/时-您的应用程序以及所有包含路由器逻辑的JavaScript都被下载到浏览器中。从那里开始，react-router在客户端处理导航。您再也不需要访问服务器了（有点过分简化的声明，但这不是有关细节的博客文章。）

当您尝试直接加载/url时，服务器不知道如何处理此请求。这就是为什么需要设置服务器端路由，以便服务器理解路由的原因。

这是您重组后的代码的样子（不是生产准备好的代码-只是为了给您一个主意）

// routes
const App = () => (
    <Switch>
        <Route path="/" component={Dashboard} exact />
        <Route path="/admin" component={AdminDashboard} exact />
        <Route path="/admin/movies" component={AdminMovies} />
        <Route path="/admin/series" component={AdminSeries} />
        <Route component={NotFound} />
    </Switch>
);

// client
<BrowserRouter>
    <App/>
</BrowserRouter>

// server (not the complete story)
<StaticRouter
    location={req.url}
    context={context}
>
    <App/>
</StaticRouter>

我建议您仔细阅读文档，因为服务器端渲染也会带来新的问题。该文档告诉您如何处理它们。

无法获取/ * url *

1 个答案: