ReactJs route handle abc.com/:pageId

Question

Ich baue eine App, um Benutzern zu erlauben, ihre eigene Seite in meiner App mit URL myurl.com/:username wie facebook.com/:username zu haben. Ich möchte nicht in URL einschließen. Unten ist mein Code:

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

Jedesmal, wenn ich zu myurl.com/mobject navigieren es mir Fehler geben Cannot GET /mobject ich webpack-dev-server verwende.

Answer 1

Ein kleiner Fehler über die <Route>. Von dem, was ich sehe (Ihr Import), nehme ich an, dass Sie RR v4 verwenden. In Version 4 gibt es keine verschachtelten <Route> mehr. Das könnte ein Problem sein. Und für #, wenn Sie BrowserRouter verwenden, werden Sie dieses Zeichen nicht sehen, wenn Sie mit <Link> navigieren. # ist von HashRouter.

Ein Beispiel für die Verwendung es

<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>