ReactJs 路由句柄 abc.com/:pageId

Question

我正在构建一个应用程序，以允许用户在我的应用程序上拥有他们自己的页面 url myurl.com/:username，例如 facebook.com/:username。我不想在 url 中包含 #。下面是我的代码：

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
<Router>
 <Route path="/" component={HomeView}>
   <Route path="/:username" component={UserView}/>
 </Route>  
</Router>

每次我导航到 myurl.com/mobject 它都会给我错误 Cannot GET /mobject 我正在使用 webpack-dev-server.

Answer 1

关于<Route>的一点小错误。据我所见（您的导入），我假设您使用的是 RR v4。在 v4 中，不再有任何嵌套的 <Route>。那可能是个问题。对于 #，如果您使用 BrowserRouter，那么您在使用 <Link> 导航时将看不到该字符。 # 来自 HashRouter.

使用示例

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomeComponent} />
    <Route exact path="/about" component={About}/>
    <Route path="/about/team" component={TeamComponent}/>
    <Route path="/category/:id" render={ ({ match }) => <div>Category: { match.params.id }</div> }/>
    <Route path="/:slug" component={ ({ match }) => <h4>Slug: { match.params.slug }</h4> }/>
  </Switch>
</BrowserRouter>

ReactJs 路由句柄 abc.com/:pageId

ReactJs route handle abc.com/:pageId

reactjs

react-router-v4