Question

是否有可能像大多数社交媒体网站那样做

somesite.com/username但仍有某些路径，例如/ login或/ settings

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/:id - but not /login or /settings" component={User} />
            <Route path="/login" component={Login} />
            <Route path="/settings" component={Settings} />
        </div>
    </BrowserRouter>, document.getElementById('root')
);

建议使用准确的

<BrowserRouter>
    <div>
        <Route path="/:id" component={User} />
        <Route exact path="/settings" component={Settings} />           

    </div>
</BrowserRouter>, document.getElementById('root')

const User = () => {    
    return (
        <h1>user</h1>
    )
}

const Settings = () => {    
    return (
        <h1>settings</h1>
    )
}

转到/设置会显示

用户

设置

Answer 1

是的，只需使用变量：

移动路径上方没有变量的路径

        <Route path="/login" component={Login} />
        <Route path="/settings" component={Settings} />
        <Route path="/:id" component={User} />

你需要这样做，因为React Router会匹配从第一个路由到最后一个路由的路由 - 如果先放置:id的路由，它将始终匹配。

如果只想渲染一条路线，您还需要将路线包裹在Switch组件内。

Answer 2

是的，使用exact属性：

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/:id" component={User} />
            <Route path="/login" exact={true} component={Login} />
            <Route path="/settings" exact={true} component={Settings} />
        </div>
    </BrowserRouter>, document.getElementById('root')
);

请参阅文档：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool

根目录上的React Router通配符路径

2 个答案: