尝试运行实现react-router-dom路由的代码段

时间:2019-07-10 09:04:07

标签: javascript reactjs react-router react-router-dom

我正在尝试在SO上运行此代码段。

我正在使用CDN中的react-router-dom。我可以匹配第一条路线,但是不知何故我无法更改为另一条路线。

是否可以使用摘要模拟这样的路由?相同的脚本适用于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"/>

0 个答案:

没有答案