Попытка запустить фрагмент, реализующий маршрутизацию реакции-маршрутизатор-дом - PullRequest
Новая
       13

Попытка запустить фрагмент, реализующий маршрутизацию реакции-маршрутизатор-дом

0 голосов
/ 10 июля 2019

Я пытаюсь запустить этот фрагмент здесь на SO.

Я использую react-router-dom из CDN.Я могу сопоставить первый маршрут, но почему-то не могу перейти на другой маршрут.

Можно ли имитировать маршрутизацию, подобную этой, с помощью фрагмента?Эти же скрипты работают на jsFiddle.

Я что-то не так делаю? 

const { BrowserRouter, Route, Switch, Link } = window.ReactRouterDOM;

function App() {
	
  return(
  	<BrowserRouter>
  	  <Switch>
  	    <Route exact path="/js" component={Home}/>
        <Route exact path="/js/comp1" component={Component1}/>
  	  </Switch>
  	</BrowserRouter>
  );
}

function Home(props) {
  console.log('Rendering Home...');
	return(
    <React.Fragment>
  	  <div>I am home</div>
      
      <div>props.location.pathname: {props.location.pathname}</div>
      <div>props.match.path: {props.match.path}</div>
      
      <Link to='/js/comp1'>Component1</Link>
    </React.Fragment>
  );
}

function Component1(props) {
  console.log('Rendering Component1...');
	return(
    <React.Fragment>
  	  <div>I am Component1</div>
      
      <div>props.location.pathname: {props.location.pathname}</div>
      <div>props.match.path: {props.match.path}</div>
      
      <Link to='/js'>Home</Link>
    </React.Fragment>
  );
}



ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.0.1/react-router-dom.min.js"></script>
<div id="root"/>
...