javascript - 如何避免使用 react 在/页面中执行主脚本？

Question

我有一个问题。

我正在为我的网站使用 React。我想做的是在/之后有完全不同的页面(例如 www.test.com/FirstPage www.test.com/SecondPage)，就像一个投资组合，我希望他们有自己的导航正文和页脚以及自己的 js文件等。但我遇到了一些问题

现在我有我的主网站，比如 www.test.com，我正在 www.test.com/differentone 中创建不同的网站，所有 css 类(如果它们与主网站中的名称相同)和 javascript 也执行.我如何避免这种情况，我希望它完全不同，而无需为/网站继承任何 css 或 js。路由甚至允许页面独立吗？

因为当我在/SecondPage 中时，即使是来自主页的 javascript 文件也会尝试触发，但它找不到主页中的内容并崩溃。

每个其他文件的命名可以完全不同，但它们的作用是一样的。我希望我解释得足够清楚了

I have my folder now like this

Answer 1

您可以使用 react-router 来处理这个问题。下面是一个小示例代码。

  <Router history={browserHistory}>
    <Route path='/dashboard' component={App} onEnter={requireAuth} >
      <IndexRoute component={MainContent} onEnter={requireAuth} />
      <Route path='/notes' component={Notelist} onEnter={requireAuth}></Route>   
    </Route> 
    <Route path='/invite/*' component={Invite}></Route>  
    <Route path='/' component={Login}> </Route>
    <Route path='/changepassword/*' component={ChangePassword}></Route>
  </Router>

这就是您如何处理在 Route 标签内使用不同 css 包装的组件。这里的 Login 组件具有不同的 css，而 App 组件是具有不同 css 的主仪表板页面。

您可以将所有 css 文件保存在 styles 文件夹中，并在 main.js 中像这样调用它。

 import './styles/main.scss';