Не удается получить / * URL *

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, он выдает мне ошибку

Невозможно получить / администратор / фильмы

и я не знаю почему.

дерево маршрутов:

    <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

Это потому, что у вас, вероятно, нет серверной маршрутизации setup.

Когда вы загружаете / - ваше приложение и весь JavaScript, который включает в себя логику маршрутизатора, загружаются в браузер. С этого момента реагирующий маршрутизатор обрабатывает навигацию на стороне клиента. Вы никогда не совершаете другую поездку на сервер (немного упрощенное утверждение, но это не запись в блоге, чтобы вдаваться в подробности).

Когда вы пытаетесь загрузить /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>      

Я бы предложил внимательно прочитать документацию, поскольку рендеринг на стороне сервера также откроет новые проблемы. В документации рассказывается, как с ними бороться.