Ist es möglich, eine Standardroute im React-Router zu definieren?

Question

Angenommen, die Basis-URL meiner App lautet example.com/app

Ist es möglich, grundlegende Routen in React-Router einzurichten, anstatt alle Routen als

zu schreiben?

/app/a
/app/b
/app/c

Ich kann sie als

angeben.

a
B
c

Ich habe das folgende Beispiel aus der Dokumentation ausprobiert, aber es funktioniert nicht (auf der Seite wird nichts angezeigt). Vielleicht liegt es daran, dass ich „react-router@3.0.0-alpha.1“ verwende oder etwas falsch mache.

import { useRouterHistory } from 'react-router'
importiere { createHistory } aus 'history'

const History = useRouterHistory(createHistory)({
  Basisname: '/app'
})

const Root = ({store}) =>
    <Provider store={store}>
        <Router-Verlauf={history}>
            <Route path='/' Component={App}>
                ...
            </Route>
        </Router>
    </Anbieter>
)

Answer 1

如果您想使用，它可以让您访问历史对象，允许您通过history.push('/my-path')更改页面 code>直接来自js的方法。您将面临这样的问题：BrowserRouter 没有可用的 history 属性，并且 Router 没有可用的 basename 。

解决办法如下：

const App: React.FC = () => {
  // do not put a slash at the end of the basename value.
  const history = createBrowserHistory({ basename: '/your-base-name' });

  return <Router history={history}>
           ...
         </Router>;
}

https://reacttraining.com/react-router/web/ api/BrowserRouter/basename-string

Answer 2

使用最新的react router (v4)，你可以轻松做到这一点

<BrowserRouter basename="/calendar">
  <Link to="/today"/> // renders <a href="/calendar/today">
</BrowserRouter>