В React тот же контент отображается на другой странице

Question

Дома. js,

render(){
Return <BrowserRouter>
<AppBar>
<ToolBar>
<Button component={Link} to={"/profile"}>Profile</Button>
</ToolBar></AppBar>
<Switch>
<Route path="/profile" render={props=><Profile {...props} user={user}/>}></Route>
</Switch>
<div>hello!!!!</div>
</BrowserRouter>

Моя проблема в этом привет !!! содержимое отображается и на странице профиля.

Итак, как решить эту проблему?

Answer 1

Добавлено {return hello !!!}} />

Теперь работает.

Answer 2

Содержимое этого компонента будет содержать все в дочерних элементах, поэтому условно все в методе рендеринга Route, предполагая, что он соответствует пути.

Используйте переключатель, чтобы обеспечить сопоставление только одного маршрута.

<Router>
<div>Static header on all pages/routes</div>
<Switch>          
    <Route path="/profile" render={props=><Profile {...props} user={user}/>}></Route>
    <Route path="/anotherpage" render={props=><div>hello!!!!</div>}></Route>
</Switch>
<div>Static footer on all pages/routes</div>
</Router>