React router отображает только путь '/'

Question

Я не знаю, что я делаю не так

  import React from 'react'
  import {render} from 'react-dom'
  import { BrowserRouter as Router, Route } from 'react-router-dom'

  class App extends React.Component {


     render(){
       return(
           <Router>
               <Route exact path="/" component={ Home } />
               <Route exact path="/test" component={ Foo } />

          </Router>
       )                                                      
    }                                                                                
 }                                                                                

 class Foo extends React.Component {                                              
    render(){                                                                    
        return(                                          
            <h1>Foo</h1>                                 
        )                                                  
    }                                                    
}                                                        
class Home extends React.Component {                     
    render(){                                            
       return(                                          
            <h1>This is the home path</h1>               
        )                                                
    }                                                
}                                                    

export default App

Я вижу h1 компонента Home, но не вижу Foo.

Я видел другие вопросы с тем же проблема, но все они разные.

Также, если я изменю путь '/' на '/ home', например, как это

<Route exact path="/home" component={ Home } />

, ничего не работает, это похоже на работу только с '/ 'путь, а не первый путь.

Answer 1

Как насчет обертывания маршрутов внутри компонента Switch?

Примерно так:

<Router>
  <Switch>
     <Route exact path="/" component={ Home } />
     <Route exact path="/test" component={ Foo } />
  </Switch>
</Router>

Не забудьте импортировать компонент Switch из «response-router-dom»

Обновление: Также удалите строку импорта:

  import {render} from 'react-dom'

Answer 2

Использование Route внутри Switch приведет к отображению первого Route, соответствующего критериям. Также вы можете использовать компонент Link для навигации между путями. Вот реализация рабочего решения.

Также см. codeandbox для демонстрации

import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/test" component={Foo} />
        </Switch>
      </Router>
    );
  }
}

class Foo extends React.Component {
  render() {
    return (
      <>
        <h2>I am the foo component</h2>
        <Link to="/">
          <button>Go to Home</button>
        </Link>
      </>
    );
  }
}
class Home extends React.Component {
  render() {
    return (
      <>
        <h1>This is the home path</h1>
        <Link to="/test">
          <button>Go to Test</button>
        </Link>
      </>
    );
  }
}

export default App;

Answer 3

Попробуйте удалить точный атрибут attr из маршрута / test и компонента Enclosed with Switch следующим образом; без роутера

<Switch>

<Route exact path="/" component={Home} />
 <Route path="/test" component={Foo} />
</Switch>


import { HashRouter, Route } from "react-router-dom";

 Try using the hashRouter from react-router-dom

             <HashRouter>                          
                   <Route exact path="/" component={Home} />
 <Route path="/test" component={Foo} /> 
             </HashRouter>